easyui的布局(layout)

通过 $.fn.layout.defaults 重写默认的 defaults。

布局容器有5个区域：布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。

通过标签创建布局(layout)

添加class="easyui-layout"到容器的<div>

   <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
      <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',title:'East',split:true" style="width:100px;"></div>
      <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
      <div data-options="region:'center',title:'center title'" 
           style="padding:5px;background:#eee;">  
      </div>
   </div>

2. 在整个页面创建布局(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',title:'East',split:true" style="width:100px;"></div>
       <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
       <div data-options="region:'center',title:'center title'"    
            style="padding:5px;background:#eee;"> 
       </div>
    </body>

3. 创建嵌套布局

注意：内部布局的西区面板式折叠的。

   <body class="easyui-layout">
       <div data-options="region:'north'" style="height:100px"></div>
       <div data-options="region:'center'">
           <div class="easyui-layout" data-options="fit:true">
               <div data-options="region:'west',collapsed:true" style="width:180px"></div>
               <div data-options="region:'center'"></div>
           </div>
       </div>
   </body>

4. 通过ajax加载内容

布局（layout）是基于面板（panel）创建的。各区域面板提供从 URL 动态加载内容的内建支持。使用动态加载技术，用户可以让他们的布局页面更快地显示。

   <body class="easyui-layout">
       <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
       <div data-options="region:'center',href:'center_content.php'" ></div>
   </body>

折叠布局面板（Collpase Layout Panel）

   $('#cc').layout();
   // collapse the west panel 折叠西区面板
   $('#cc').layout('collapse','west');

通过工具按钮添加西区面板

   $('#cc').layout('add',{
       //定义面板
       region: 'west',
       //宽度
       width: 180,
       //面板Title
       title: 'West Title',
       //布尔类型，当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。
       split: true,
       tools: [{
           iconCls:'icon-add',
           handler:function(){alert('add')}
       },{
           iconCls:'icon-remove',
           handler:function(){alert('remove')}
       }]
   });

5. 特殊地，有时候根据需求面板收缩时需要展示面板Title中的内容,一般通过修改jquery.easyui.min.js来完成.

方法一：

首先，找到easyui目录下的jquery.easyui.min.js，

其中，需要设置两个变量_Edtitle,_EdIcon，

标题变量，在5105行_39d方法中，添加如下代码：

var _Edtitle;

var _closedTitle = p.panel("options").title;

if (_closedTitle) {

_Edtitle = _closedTitle;

} else {

_Edtitle = '';

}

//图标变量，在5162行的方法中，添加如下代码：

p.panel($.extend({}, $.fn.layout.paneldefaults, {

cls: ("layout-expand layout-expand-" + dir), title: _Edtitle, iconCls: _EdIcon, closed: true,

minWidth: 0, minHeight: 0, doSize: false, tools: [{

iconCls: icon, handler: function () {

_3ad(_39e, _39f);

return false;

}

}]

}));

最后，将面板的title属性，iconCls属性设置为上面定义的变量即可；

方法二：

在jquery.easyui.min.js文件的最下面添加下面的代码即可：

var buttonDir = { north: 'down', south: 'up', east: 'left', west: 'right' };

$.extend($.fn.layout.paneldefaults, {

onBeforeCollapse: function () {

var popts = $(this).panel('options');

var dir = popts.region;

var btnDir = buttonDir[dir];

if (!btnDir) return false;



setTimeout(function () {

var pDiv = $('.layout-button-' + btnDir).closest('.layout-expand').css({

textAlign: 'center', lineHeight: '18px', fontWeight: 'bold'

});



if (popts.title) {

var vTitle = popts.title;

if (dir == "east" || dir == "west") {

var vTitle = popts.title.split('').join('<br/>');

pDiv.find('.panel-body').html(vTitle);

} else {

$('.layout-button-' + btnDir).closest('.layout-expand').find('.panel-title').css({ textAlign: 'left' }).html(vTitle)

}

}

}, 100);

}

});

easyui的布局(layout)

猜你喜欢