标签：
一、EasyLoader（简单加载）
locale属性：值类型是string
locales属性：值类型是object
二、Draggable（拖动）
1.通过标签创建：
<div id="drag" class="easyui-draggable" data-options="handle:‘#getDrag‘"style="width:100px;height:100px;">
<div id="getDrag"style="background:#ccc;">title</div>
</div>
2.通过JS调用：
html代码：
<div id="drag" style="width:100px;height:100px;"> <div id="getDrag" style="background:#ccc;">title</div> </div>
JS代码：
$(‘#drag‘).draggable({ handle:‘#getDrag‘ });
三、Droppable（放置）
1.通过标签创建：
<div id="drop" class="easyui-droppable" data-options="accept:‘#drop1,#drop2‘" style="width:100px;height:100px;"></div>
2.通过JS调用
html代码：
<div id="drop" style="width:100px;height:100px;"></div>
JS代码：
$(‘#drop‘).droppable({
accept:‘#drop1,#drop2‘
});
四、Resizable（调整大小）
1.通过标签创建：
<div id="resize" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>
2.通过JS调用：
html代码：
<div id="resize" style="width:100px;height:100px;border:1px solid #ccc;"></div>
JS代码：
$(‘#resize‘).resizable({
maxWidth:800,
maxHeight:600
});
五、Pagination（分页）
1.通过标签创建：
<div id="pagination" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
2.通过JS调用
html代码：
<div id="pagination" style="background:#efefef;border:1px solid #ccc;"></div>
JS代码：
$("#pagination").pagination({
total:2000,
pageSize:10
});
六、SearchBox（搜索框）
1.通过标签创建：
<script type="text/javascript"> function qq(value,name){ alert(value+":"+name) } </script> <input id="ss" class="easyui-searchbox" style="width:300px" data-options="searcher:qq,prompt:‘Please Input Value‘,menu:‘#mm‘"></input> <div id="mm" style="width:120px"> <div data-options="name:‘all‘,iconCls:‘icon-ok‘">All News</div> <div data-options="name:‘sports‘">Sports News</div> </div>
2.通过JS调用：
html代码：
<input id="ss"></input> <div id="mm" style="width:120px"> <div data-options="name:‘all‘,iconCls:‘icon-ok‘">All News</div> <div data-options="name:‘sports‘">Sports News</div> </div>
JS代码：
$(‘#ss‘).searchbox({ searcher:function(value,name){ alert(value + "," + name) }, menu:‘#mm‘, prompt:‘请输入值‘ });
七、ProgressBar（进度条）
1.通过标签创建：
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
2.通过JS调用：
html代码：
<div id="p" style="width:400px;"></div>
JS代码：
$(‘#p‘).progressbar({
value: 60
});
获取当前值和设置一个新的值到进度条控件：
var value = $(‘#p‘).progressbar(‘getValue‘);
if (value < 100){
value += Math.floor(Math.random() * 10);
$(‘#p‘).progressbar(‘setValue‘, value);
}
八、Tooltip（提示框）
1.通过标签创建：
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
2.通过JS调用：
html代码：
<a id="dd" href="javascript:void(0)">Click here</a>
JS代码：
$(‘#dd‘).tooltip({
position: ‘right‘,
content: ‘<span style="color:#fff">This is the tooltip message.</span>‘,
onShow: function(){
$(this).tooltip(‘tip‘).css({
backgroundColor: ‘#666‘,
borderColor: ‘#666‘
});
}
});
标签：
原文地址：http://www.cnblogs.com/koto/p/5312208.html
