}
}],
"layout":['list','sep','first','prev','manual','next','last','links'],
"showPageList":false,
});
$("#pp").pagination({
"onSelectPage":function(pageNumber,b){
alert(pageNumber);
alert(b)
}
})
我这里是添加了一些事件和方法的，可以依据实际情况进行增加或删除或修改里面的小的部分组件。大大方便了我们的开发。
3.2 ProgressBar（进度条）
使用$.fn.progressbar.defaults重写默认值对象。
使用HTML标签或程序创建进度条组件。从标签创建更加简单，添加’easyui-progressbar’类ID到<div/>标签。
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>使用Javascript创建进度条。
<div id="p" style="width:400px;" ></div><br />
<input id="startID" type="button" value="开始" style="width:100px;height:30px" />
<script>
$("#p").progressbar({
width:1000,
height:40,
value:0
});
//获取1-9之间的随机数
function getNum(){
return Math.floor(Math.random()*9)+1;
}
/* for(var i=0;i<20;i++){
var num=getNum();
document.write(num+"<br />");
} */
var timeID=null;
function update(){
//获取随机值
var num=getNum();
//获取进度条当前值
var value=$("#p").progressbar("getValue");
if(value+num>100){
//设置进度条当前值为100，且停止运行
$("#p").progressbar("setValue",100);
window.clearInterval(timeID);
$("#startID").removeAttr("disabled");
}else{
$("#p").progressbar("setValue",(value+num))
}
}
$("#startID").click(function(){
timeID=window.setInterval("update()",500);
//按钮失效
$(this).attr("disabled","disabled");
});
</script>
四、Layout组件的使用
4.1 layout的使用
布局是最常用的组件了，官方提供的是拥有5个布局方向的：北、南、东、西、中.
基本的使用方式如下：
<div
id="layoutID"
class="easyui-layout"
data-options="fit:true"
style="width:800px;height:500px">
<!-- 上 -->
<div data-options="region:'north',title:'上',split:true,iconCls:'icon-edit',minHeight:'100',maxHeight:'200'" style="height:100px;"></div>
<!-- 下 -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 右 -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
