easyUI API(version 1.5)
不分先后,只做记录。
jquery+easyui培训文档下载地址:
链接: https://pan.baidu.com/s/1dFgFXk9 密码: jj5d
1 easyui-draggable(拖动)
两种写法:
<div id="dd" class="easyui-draggable"
data-options="handle:'#move',revert:'true',cursor:'crosshair',axis:'v'" style="width:100px;height:100px;"> <div id="move" style="background:#7097cc;">ys_draggable </div> </div>
<div id="dd" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div> </div>
$('#dd').draggable({ handle:'#title' });
Demo可参考:http://www.jeasyui.net/demo/521.html
2 easyui-droppable(放置)
两种写法:
<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>
<div id="dd" style="width:100px;height:100px;"></div>
$('#dd').droppable({ accept:'#d1,#d3' });
Demo可参考:http://www.jeasyui.net/demo/523.html
3 easyui-resizable (调整大小)
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>
$('#rr').resizable({ maxWidth:800, maxHeight:600 });
Demo可参考:http://www.jeasyui.net/demo/551.html
4 easyui-pagination(分页)
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination({ total:2000, pageSize:10 });
Demo可参考:http://www.jeasyui.net/demo/377.html
5 easyui-searchbox(搜索框)
<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>
<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>
$('#ss').searchbox({ searcher:function(value,name){ alert(value + "," + name) }, menu:'#mm', prompt:'请输入值' });
Demo可参考:http://www.jeasyui.net/demo/552.html
6 easyui-progressbar(进度条)
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
<div id="p" style="width:400px;"></div>
$('#p').progressbar({ value: 60 });
Demo可参考:http://www.jeasyui.net/demo/383.html
7 easyui-tooltip(提示框)
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
<a id="dd" href="javascript:void(0)">Click here</a>
$('#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' }); }});
Demo可参考:http://www.jeasyui.net/demo/571.html
8 easyui-panel(面板)
<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> <p>panel content.</p> <p>panel content.</p> </div>
<div id="p" style="padding:10px;"> <p>panel content.</p> <p>panel content.</p> </div> $('#p').panel({ width:500, height:150, title: 'My Panel', tools: [{ iconCls:'icon-add', handler:function(){alert('new')} },{ iconCls:'icon-save', handler:function(){alert('save')} }] });
Demo可参考:http://www.jeasyui.net/demo/380.html
9 easyui-tabs(选项卡)
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div>
$('#tt').tabs({ border:false, onSelect:function(title){ alert(title+' is selected'); } });
Demo可参考:http://www.jeasyui.net/demo/396.html
10 easyui-accordion(分类)
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div>
$('#aa').accordion({ animate:false });
Demo可参考:http://www.jeasyui.net/demo/482.html
11 easyui-layout(布局)
<div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <div data-options="region:'north',title:'North Title',split:true" 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> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </div>
<body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" 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> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body>
<body class="easyui-layout"> <div data-options="region:'north'" style="height:100px"></div> <div data-options="region:'center'"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'west',collapsed:true" style="width:180px"></div> <div data-options="region:'center'"></div> </div> </div> </body>
<body class="easyui-layout"> <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div> <div data-options="region:'center',href:'center_content.php'" ></div> </body>
Demo可参考:http://www.jeasyui.net/demo/529.html
12 easyui-menu(菜单)
<div id="mm" class="easyui-menu" style="width:120px;"> <div>New</div> <div> <span>Open</span> <div style="width:150px;"> <div><b>Word</b></div> <div>Excel</div> <div>PowerPoint</div> </div> </div> <div data-options="iconCls:'icon-save'">Save</div> <div class="menu-sep"></div> <div>Exit</div> </div>
$('#mm').menu({ onClick:function(item){ //... } });
$('#mm').menu('show', { left: 200, top: 100 });
Demo可参考:http://www.jeasyui.net/demo/537.html
13 easyui-linkbutton(按钮)
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
<a id="btn" href="#">easyui</a> $('#btn').linkbutton({ iconCls: 'icon-search' });
Demo 可参考:http://www.jeasyui.net/demo/367.html
14 easyui-menubutton(菜单按钮)
15 easyui-splitbutton(分割按钮)
16 easyui-switchbutton(开关按钮)
17 easyui-validatebox(验证框)
18 easyui-textbox(文本框)
19 easyui-passwordbox(密码框)
20 easyui-combobox(下拉列表框)
21 easyui-combotree(树形下拉框)
22 easyui-combogrid(数据表格下拉框)
23 easyui-combotreegrid(数型表格下拉框)
24 easyui-numberbox(数值输入框)
25 easyui-datebox(日期输入框)
26 easyui-datetimebox(日期时间输入框)
27 easyui-datetimespinner(日期时间微调框)
28 easyui-calendar(日历)
29 easyui-numberspinner(数字微调)
30 easyui-slider(滑动条)
31 easyui-filebox(文件框)
32 easyui-window(窗口)
33 easyui-dialog(对话框窗口)
34 easyui-datagrid(数据表格)
35 easyui-datalist(数据列表)
36 easyui-propertygrid(属性表格)
37 easyui-tree(树)
38 easyui-treegrid(树形表格)