jQuery EasyUI 1.3用法.pptxVIP

1.1jQueryEasyUI简介1 jQuery EasyUI是什么jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面1.2 Base（基础）Easyloader 加载器Draggable 可拖动Droppable 可放置Resizable 可调整尺寸Pagination 分页Searchbox 搜索框Progressbar 进度条Tooltip 提示框1.3Layout（布局）Panel 面板Tabs 标签页/选项卡Accordion 折叠面板Layout 布局1.3Layout（布局）Panel 面板1. 使用标签创建控制面板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:trueppanel content./pppanel content./p/div1.3Layout（布局）Panel 面板2. 使用脚本创建控制面板div id=p style=padding:10px;ppanel content./pppanel 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)}}]});1.3Layout（布局）Tabs 标签页/选项卡1. 使用HTML标签创建选项卡div id=tt class=easyui-tabs style=width:500px;height:250px;div title=Tab1 style=padding:20px;display:none;tab1/divdiv title=Tab2 closable=true style=overflow:auto;padding:20px;display:none;tab2/divdiv title=Tab3 iconCls=icon-reload closable=true style=padding:20px;display:none;tab3/div/div1.3Layout（布局）Tabs 标签页/选项卡使用脚本创建选项卡$(#tt).tabs({border:false,onSelect:function(title){alert(title+ is selected);}});1.3Layout（布局）Accordion 折叠面板使用html标签创建可伸缩面板，只须要对div标签引用easyui-accordion类。div id=aa class=easyui-accordion style=width:300px;height:200px;div title=Title1 iconCls=icon-save style=overflow:auto;padding:10px;h3 style=color:#0099FF;Accordion for jQuery/h3pAccordion is a part of easyui framework for jQuery.It lets you define your accordion component on web page more easily./p/divdiv title=Title2 iconCls=icon-reload selected=true style=padding:10px;content2/divdiv title=Title3content3/div/div1.3Layout（布局）Layout 布局使用HTML标签创建布局面板，只须要对div标签引用easyui-layout类。div id=cc class=easyui-layout style=width:600px;height:400px;div region=north title=North Title split=true style=height:100px;/divdiv region=south title=South Title split=tru