jQuery-EasyUI-1.3用法

1.1jQueryEasyUI简介1jQueryEasyUI是什么jQueryEasyUI是一组基于jQuery的UI插件集合体，而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面Easyloader加载器Draggable可拖动Droppable可放置Resizable可调整尺寸Pagination分页Searchbox搜索框Progressbar进度条Tooltip提示框1.2Base（基础）Panel面板Tabs标签页/选项卡Accordion折叠面板Layout布局1.3Layout（布局）Panel面板1.使用标签创建控制面板divid=pclass=easyui-paneltitle=MyPanelstyle=width:500px;height:150px;padding:10px;background:#fafafa;data-options=iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:trueppanelcontent./pppanelcontent./p/div1.3Layout（布局）Panel面板2.使用脚本创建控制面板divid=pstyle=padding:10px;ppanelcontent./pppanelcontent./p/div$('#p').panel({width:500,height:150,title:'MyPanel',tools:[{iconCls:'icon-add',handler:function(){alert('new')}},{iconCls:'icon-save',handler:function(){alert('save')}}]});1.3Layout（布局）Tabs标签页/选项卡1.使用HTML标签创建选项卡divid=ttclass=easyui-tabsstyle=width:500px;height:250px;divtitle=Tab1style=padding:20px;display:none;tab1/divdivtitle=Tab2closable=truestyle=overflow:auto;padding:20px;display:none;tab2/divdivtitle=Tab3iconCls=icon-reloadclosable=truestyle=padding:20px;display:none;tab3/div/div1.3Layout（布局）Tabs标签页/选项卡使用脚本创建选项卡$('#tt').tabs({border:false,onSelect:function(title){alert(title+'isselected');}});1.3Layout（布局）Accordion折叠面板使用html标签创建可伸缩面板，只须要对div标签引用'easyui-accordion'类。divid=aaclass=easyui-accordionstyle=width:300px;height:200px;divtitle=Title1iconCls=icon-savestyle=overflow:auto;padding:10px;h3style=color:#0099FF;AccordionforjQuery/h3pAccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily./p/divdivtitle=Title2iconCls=icon-reloadselected=truestyle=padding:10px;content2/divdivtitle=Title3content3/div/div1.3Layout（布局）Layout布局使用HTML标签创建布局面板，只须要对div标签引用'easyui-layout'类。divid=ccclass=easyui-layoutstyle=width:600px;height:400px;divregion=northtitle=NorthTitlesplit=truestyle=height:100px;/divdivregion=southtitle=SouthTitlesplit=truestyle=height:100px;/divdivregion=easticonCls=icon-reloadtitle=Eastsplit=truestyle=width:100px;/divdivregion=westsplit=truetitle=Weststyle=width:100px;/divdivregion=centertitle=centertitlestyle=padding:5px;background:#eee;/div/div在整个页面创建布局面板。bodyclass=easyui-layoutdivregion=northtitle=NorthTitlesplit=truestyle=height:100px;/divdivregion=southtitle=SouthTitlesplit=truestyle=height:100px;/divdivregion=easticonCls=icon-reloadtitle=Eastsplit=truestyle=width:100px;/divdivregion=westsplit=truetitle=Weststyle=width:100px;/divdivregion=centertitle=centertitlestyle=padding:5px;background:#eee;/div/body1.3Layout（布局）Menu菜单Linkbutton链接按钮Menubutton菜单按钮Splitbutton分割按钮1.4Menu（菜单）与Button（按钮）Menu菜单使用HTML标签创建菜单必须对div标签引用'easyui-menu'类，每个菜单项都将使用div标签创建。为菜单添加'iconCls'属性可以指定一个显示在菜单项左侧的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。divid=mmclass=easyui-menustyle=width:120px;divNew/divdivspanOpen/spandivstyle=width:150px;divbWord/b/divdivExcel/divdivPowerPoint/div/div/divdiviconCls=icon-saveSave/divdivclass=menu-sep/divdivExit/div/div显示菜单当一个菜单创建完毕，它是隐藏而不可见的，调用'show'方法可以显示菜单。$('#mm').menu('show',{left:200,top:100})1.4Menu（菜单）与Button（按钮）Linkbutton链接按钮使用方法：ahref=#id=btniconCls=icon-searcheasyui/a$('#btn').linkbutton({plain:true});$('#btn').linkbutton('disable');//禁用按钮$('#btn').linkbutton('enable');//启用按钮1.4Menu（菜单）与Button（按钮）Menubutton菜单按钮使用方法：ahref=javascript:void(0)id=mbiconCls=icon-editEdit/adivid=mmstyle=width:150px;diviconCls=icon-undoUndo/divdiviconCls=icon-redoRedo/divdivclass=menu-sep/divdivCut/divdivCopy/divdivPaste/divdivclass=menu-sep/divdiviconCls=icon-removeDelete/divdivSelectAll/div/div$('#mb').menubutton({menu:'#mm'});1.4Menu（菜单）与Button（按钮）Form表单Validatebox验证框Combo组合Combobox组合框Combotree组合树Combogrid组合网格Numberbox数字框Datebox日期框Datetimebox日期时间框Calendar日历Spinner微调器Numberspinner数值微调器Timespinner时间微调器Slider滑块1.5Form（表单）Form表单使用方法：formid=ffmethod=post.../form使用ajax方式提交表单$('#ff').form({url:...,onSubmit:function(){//进行表单验证//如果返回false阻止提交},success:function(data){alert(data)}});//提交表单$('#ff').submit();1.5Form（表单）Validatebox验证框使用方法：inputid=vvrequired=truevalidType=email$('#vv').validatebox({required:true现在你可以使用最小长度验证规则来定义一个至少要输入5个字符的输入框。inputclass=easyui-validateboxvalidType=minLength[5]1.5Form（表单）Combo组合使用方法：inputid=ccvalue=001selectid=cc/select$('#cc').combo({required:true,multiple:true});1.5Form（表单）Combobox组合框使用方法：selectid=ccname=deptstyle=width:200px;optionvalue=aaaitem1/optionoptionbitem2/optionoptionbitem3/optionoptionditem4/optionoptioneitem5/option/selectinputid=ccname=deptvalue=aa$('#cc').combobox({url:'combobox_data.json',valueField:'id',textField:'text'});1.5Form（表单）Combotree组合树使用方法：selectid=ccstyle=width:200px;/