一、基本配置
打开NetBeans，在“文件”菜单中点击“新建项目”，“类别”中选择“PHP”，点击“下一步”后将“源文件夹”名称改成“D:\Project”，然后修改项目名称为“ExpPrj”，然后点击完成。
然后将EasyUI解压到ExpPrj目录下，更名为EasyUI，同时新建css目录、js目录、images目录，分别存放css文件、js文件和图片文件。整个目录看起来应该是这样的：
这里的“源文件”目录是NetBeans IDE自动显示的，并不存在这样的实际目录，我们也不用去管它。PHP文件就直接放在ExpPrj目录下，当然也可以根据实际需要建立其他子目录。
二、样例代码
在工程目录（D:\Project\ExpPrj）下新建example.php文件，并在<head>标签中引入必要的文件。
example.php
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<!--
引入主题文件，themes目录下每个子目录都是一个主题(除icons目录)，只要将上行代码中default替换成其他目录名即可。
-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<!-- 引入EasyUI框架内置的图标-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- 引入jQuery核心文件 -->
<script type="text/javascript" src="easyui/jquery.easyui.min.js">
</script>
<!-- 引入EasyUI框架核心文件 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js">
</script>
<!-- 引入EasyUI国际化语言包文件，此处为简体中文 -->
除语言包外，其他文件均是必需的。如果是开发中文或其他语言的系统，建议引入语言包文件。
我们来编写一个进度条组件相关的实例。在example.php页面的<body>标签内键入下列代码：
<div id="pb" class="easyui-progressbar" style="width:400px;"></div>
<button id="btn" onclick="startBar();">开始</button>
<script>
var t = 0, time_id = null;
$("#pb").progressbar({
value:0,
onChange:function(newValue, oldValue) { //onChange事件
if (newValue == 100) {
//如果进度到了100%，清除定时器，开启“开始”按钮
window.clearInterval(time_id);
time_id = null;
$("#btn").attr("disabled",false);
alert("完成");
} //if
} // onChange
});
function addProgressBar() {
//设置进度条显示的数值
t += 10;
$("#pb").progressbar("setValue", t);
}
function startBar() {
// 建立定时器，每隔1秒调用addProgressBar函数，并关闭“开始”按钮
time_id = window.setInterval(addProgressBar, 1000);
$("#btn").attr("disabled",true);
}
</script>
效果如下：
样例程序实现了每隔一秒就将进度条增加10%，直到100%时弹出“完成”对话框。
例子中以
<div>标签为基础，通过easyui-progressbar样式建立EasyUI框架中的进度条组件，同时创建一个按钮用来启动进度条。点击按钮调用“startBar”方法，该方法实现两个功能，一是以1秒（1000毫秒）为单位设置定时器，二是关闭按钮。定时器绑定了addProgressBar方法，每隔一秒执行一次。addProgressBar方法每执行一次，就将进度条增加10%。
网友评论