UasyUi的各种方法整理： 1.拖动 放置 droppable $('#dd').droppable({ }); 2.创建可变大小的窗口 resizable $('#rr').resizable({ maxWidth:800, maxHeight:600 }); 3.提示框 tooltip <a href="#" title="这是一个提示框" class="easyui-tooltip">Hover me</a> 4.面板 panel 创建一个面板： <div id="p" style="padding:10px;"> <p>panel content.</p> <p>panel content.</p> </div> $('#p').panel({ 500, height:150, title: 'My Panel', tools: [{ iconCls:'icon-add', handler:function(){alert('new')} },{ iconCls:'icon-save', handler:function(){alert('save')} }] }); 5.选项卡 tabs 创建一个选项卡： <div id="tt" class="easyui-tabs" style="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> 6.手风琴分类 accordion 创建： <div id="aa" class="easyui-accordion" style="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> 7.布局 layout 创建页面布局： <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="100px;"></div> <div data-options="region:'west',title:'West',split:true" style="100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body> 8.按钮 linkbutton 创建一个按钮： <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a> 9.验证框 validatebox <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" /> 10.文本框 textbox <input class="easyui-textbox" data-options="iconCls:'icon-search'" style="300px"> 11.密码框 passwordbox <input class="easyui-passwordbox" prompt="Password" iconWidth="28" style="100%;height:34px;padding:10px"> 12.下拉列表框 combobox 创建2个有依赖关系的下拉列表框: <input id="cc1" class="easyui-combobox" data-options=" valueField: 'id', textField: 'text', url: 'get_data1.php', onSelect: function(rec){ var url = 'get_data2.php?id='+rec.id; $('#cc2').combobox('reload', url); }" /> <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" /> 13.window窗口 <div id="win" class="easyui-window" title="My Window" style="600px;height:400px" data-options="iconCls:'icon-save',modal:true"> Window Content </div> 14.消息窗口 $.messager.confirm('确认','您确认想要删除记录吗？',function(r){ if (r){ $.messager.alert('警告','删除成功'); } });