您现在的位置是：首页 > 文章详情

网站前端_EasyUI.基础入门.0008.带你玩转jQuery EasyUI Layout组件?

日期：2017-02-17点击：453收藏

简单介绍:

说明: ($.fn.layout)布局,依赖panel和resizable,默认分为5个区东east,西west,南south,北north,中center,中间的区域面板是必须的,边缘区域面板是可选的,每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板.布局可嵌套,因此用户可建立复杂的布局.

基础用法:

<div id="l" class="easyui-layout">     <div data-options="region:'east',width:100,title:'east title'"></div>     <div data-options="region:'west',width:200,title:'west title'"></div>     <div data-options="region:'south',width:100,height:100,title:'south title'"></div>     <div data-options="region:'north',width:100,height:100,title:'north title'"></div>     <div data-options="region:'center',title:'center title'">         <div id="ll" class="easyui-layout" data-options="fit:true">             <div data-options="region:'west',title:'sub west title',width:200"></div>             <div data-options="region:'center',title:'sub center title',collapsed:true"></div>         </div>     </div>            </div> <!-- 说明: 加载jquery-easyui脚本文件 --> <script src="js/jquery-easyui/jquery.min.js"></script> <script src="js/jquery-easyui/jquery.easyui.min.js"></script> <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <style type="text/css">     body {         padding: 0;         margin: 0;     } </style> <script type="text/javascript">     var width = $(document).width();     var height = $(document).height();     $('#l').layout({         width: width,         height: height,     }); </script>

布局属性:

fit -> boolean

说明: 当设置为true时,就设置布局的尺寸适应它的父容器,当在body标签上创建布局时,它将自动最大化到整个页面的全部尺寸

<body class="easyui-layout" data-options="fit:true">     <div data-options="region:'east',width:100,title:'east title'"></div>     <div data-options="region:'west',width:200,title:'west title'"></div>     <div data-options="region:'south',width:100,height:100,title:'south title'"></div>     <div data-options="region:'north',width:100,height:100,title:'north title'"></div>     <div data-options="region:'center',title:'center title'">         <div id="ll" class="easyui-layout" data-options="fit:true">             <div data-options="region:'west',title:'sub west title',width:200"></div>             <div data-options="region:'center',title:'sub center title',collapsed:true"></div>         </div>     </div>                <!-- 说明: 加载jquery-easyui脚本文件 -->     <script src="js/jquery-easyui/jquery.min.js"></script>     <script src="js/jquery-easyui/jquery.easyui.min.js"></script>     <script src="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

<body class="easyui-layout" data-options="fit:true">     <div data-options="region:'east',width:100,title:'east title'">     </div>     <div data-options="region:'west',width:200,title:'west title'"></div>     <div data-options="region:'south',width:100,height:100,title:'south title'">     </div>     <div data-options="region:'north',width:100,height:100,title:'north title'">         <div>             <fieldset>                 <legend>操作区</legend>                 <a href="#" class="easyui-linkbutton" onclick="javascript:westLoad(this);">左侧加载远程数据</a>                 <a href="#" class="easyui-linkbutton" onclick="javascript:westCollapse(this);">左侧面板缓慢合并</a>                 <a href="#" class="easyui-linkbutton" onclick="javascript:westExpand(this);">左侧面板缓慢展开</a>                 <a href="#" class="easyui-linkbutton" onclick="javascript:centerRemove(this);">删除中间左边面板</a>                 <a href="#" class="easyui-linkbutton" onclick="javascript:centerAdd(this);">添加中间左边面板</a>             </fieldset>         </div>     </div>     <div data-options="region:'center',title:'center title'">         <div id="ll" class="easyui-layout" data-options="fit:true">             <div data-options="region:'west',title:'sub west title',width:200"></div>             <div data-options="region:'center',title:'sub center title',collapsed:true"></div>         </div>     </div>                <!-- 说明: 加载jquery-easyui脚本文件 -->     <script src="js/jquery-easyui/jquery.min.js"></script>     <script src="js/jquery-easyui/jquery.easyui.min.js"></script>     <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>     <script type="text/javascript">         function westLoad(that) {             var $wpanel = $('body').layout('panel', 'west');             $wpanel.panel({                 extractor: function(data){                     var h = '<ul>';                     var d = JSON.parse(data);                     for(var i=0; i<d['total']; i++){                         h += '<li><a href="#">' + d['rows'][i]['name'] + '</a></li>'                     };                     h += '</ul>';                     return h;                 },             });             $wpanel.panel('refresh', '/easyui/data.json');         };         function westCollapse(that){             $('body').layout('collapse', 'west');         };         function westExpand(that){             $('body').layout('expand', 'west');         };         function centerRemove(that){             $('#ll').layout('remove', 'west');         };         function centerAdd(that){             $('#ll').layout('add', {region:'west',title:'sub west title',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