网站前端_EasyUI.基础入门.0008.带你玩转jQuery EasyUI Layout组件?
简单介绍: 说明: ($.fn.layout)布局,依赖panel和resizable,默认分为5个区东east,西west,南south,北north,中center,中间的区域面板是必须的,边缘区域面板是可选的,每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板.布局可嵌套,因此用户可建立复杂的布局. 基础用法: <divid="l"class="easyui-layout"> <divdata-options="region:'east',width:100,title:'easttitle'"></div> <divdata-options="region:'west',width:200,title:'westtitle'"></div> <divdata-options="region:'south',width:100,height:100,title:'southtitle'"></div> <divdata-options="region:'north',width:100,height:100,title:'northtitle'"></div> <divdata-options="region:'center',title:'centertitle'"> <divid="ll"class="easyui-layout"data-options="fit:true"> <divdata-options="region:'west',title:'subwesttitle',width:200"></div> <divdata-options="region:'center',title:'subcentertitle',collapsed:true"></div> </div> </div> </div> <!--说明:加载jquery-easyui脚本文件--> <scriptsrc="js/jquery-easyui/jquery.min.js"></script> <scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script> <scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <styletype="text/css"> body{ padding:0; margin:0; } </style> <scripttype="text/javascript"> varwidth=$(document).width(); varheight=$(document).height(); $('#l').layout({ width:width, height:height, }); </script> 布局属性: fit -> boolean 说明: 当设置为true时,就设置布局的尺寸适应它的父容器,当在body标签上创建布局时,它将自动最大化到整个页面的全部尺寸 <bodyclass="easyui-layout"data-options="fit:true"> <divdata-options="region:'east',width:100,title:'easttitle'"></div> <divdata-options="region:'west',width:200,title:'westtitle'"></div> <divdata-options="region:'south',width:100,height:100,title:'southtitle'"></div> <divdata-options="region:'north',width:100,height:100,title:'northtitle'"></div> <divdata-options="region:'center',title:'centertitle'"> <divid="ll"class="easyui-layout"data-options="fit:true"> <divdata-options="region:'west',title:'subwesttitle',width:200"></div> <divdata-options="region:'center',title:'subcentertitle',collapsed:true"></div> </div> </div> <!--说明:加载jquery-easyui脚本文件--> <scriptsrc="js/jquery-easyui/jquery.min.js"></script> <scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script> <scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> </body> 布局接口: resize -> function 说明: 设置面板尺寸并且做布局,需要传入包含width/height/left/top的对象 panel -> function 说明: 返回指定面板,需要传递region参数,参数支持north,south,east,west,center collapse -> function 说明: 折叠指定的面板,需要传递region参数,参数支持north,south,east,west,center expand -> function 说明: 展开指定的面板,需要传递region参数,参数支持north,south,east,west,center add -> function 说明: 添加一个指定的面板,options参数一个配置对象 remove -> function 说明: 移除指定的面板,需要传递region参数,参数支持north,south,east,west,center <bodyclass="easyui-layout"data-options="fit:true"> <divdata-options="region:'east',width:100,title:'easttitle'"> </div> <divdata-options="region:'west',width:200,title:'westtitle'"></div> <divdata-options="region:'south',width:100,height:100,title:'southtitle'"> </div> <divdata-options="region:'north',width:100,height:100,title:'northtitle'"> <div> <fieldset> <legend>操作区</legend> <ahref="#"class="easyui-linkbutton"onclick="javascript:westLoad(this);">左侧加载远程数据</a> <ahref="#"class="easyui-linkbutton"onclick="javascript:westCollapse(this);">左侧面板缓慢合并</a> <ahref="#"class="easyui-linkbutton"onclick="javascript:westExpand(this);">左侧面板缓慢展开</a> <ahref="#"class="easyui-linkbutton"onclick="javascript:centerRemove(this);">删除中间左边面板</a> <ahref="#"class="easyui-linkbutton"onclick="javascript:centerAdd(this);">添加中间左边面板</a> </fieldset> </div> </div> <divdata-options="region:'center',title:'centertitle'"> <divid="ll"class="easyui-layout"data-options="fit:true"> <divdata-options="region:'west',title:'subwesttitle',width:200"></div> <divdata-options="region:'center',title:'subcentertitle',collapsed:true"></div> </div> </div> <!--说明:加载jquery-easyui脚本文件--> <scriptsrc="js/jquery-easyui/jquery.min.js"></script> <scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script> <scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <scripttype="text/javascript"> functionwestLoad(that){ var$wpanel=$('body').layout('panel','west'); $wpanel.panel({ extractor:function(data){ varh='<ul>'; vard=JSON.parse(data); for(vari=0;i<d['total'];i++){ h+='<li><ahref="#">'+d['rows'][i]['name']+'</a></li>' }; h+='</ul>'; returnh; }, }); $wpanel.panel('refresh','/easyui/data.json'); }; functionwestCollapse(that){ $('body').layout('collapse','west'); }; functionwestExpand(that){ $('body').layout('expand','west'); }; functioncenterRemove(that){ $('#ll').layout('remove','west'); }; functioncenterAdd(that){ $('#ll').layout('add',{region:'west',title:'subwesttitle',width:200}) }; </script> </body> 面板扩展: title -> string 说明: 布局面板的标题文本. region -> string 说明: 定义布局面板的位置,其值可以为north,south,east,west,center border -> boolean 说明: 当设置为true时,就显示布局面板的边框 split -> boolean 说明: 当设置为true时,就显示拆分栏,用户可以改变面板的尺寸. iconCls -> string 说明: 当面板头部显示一个图表的css class href -> string 说明: 从远程站点加载数据的url collapsible -> boolean 说明: 定义是否显示可折叠按钮. minWidth -> number 说明: 面板的最小宽度 maxWidth -> number 说明: 面板的最大宽度 minHeigit -> number 说明: 面板的最小高度 maxHeight -> number 说明: 面板的最大高度
