easyui系列之布局Layout,Panel,Accordion,Tabs（1）
1、Layout布局
通过 $.fn.layout.defaults 重写默认的 defaults。
布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。
1、通过标记创建布局（Layout）。
添加 \’easyui-layout\’ class 到 <div> 标记。
1 <div id="cc" class="easyui-layout" style="width:600px;height:400px;"> 2 <div data-options="region:\'north\',title:\'North Title\',split:true" style="height:100px;"></div> 3 <div data-options="region:\'south\',title:\'South Title\',split:true" style="height:100px;"></div> 4 <div data-options="region:\'east\',title:\'East\',split:true" style="width:100px;"></div> 5 <div data-options="region:\'west\',title:\'West\',split:true" style="width:100px;"></div> 6 <div data-options="region:\'center\',title:\'center title\'" style="padding:5px;background:#eee;"></div> 7 </div>
2、通过 ajax 加载内容。
布局（layout）是基于面板（panel）创建的。各区域面板提供从 URL 动态加载内容的内建支持。使用动态加载技术，用户可以让他们的布局页面更快地显示。
1 <body class="easyui-layout"> 2 <div data-options="region:\'west\',href:\'west_content.php\'" style="width:180px" ></div> 3 <div data-options="region:\'center\',href:\'center_content.php\'" ></div> 4 </body>
通过工具按钮添加西区面板
1 $(\'#cc\').layout(\'add\',{ 2 region: \'west\', 3 width: 180, 4 title: \'West Title\', 5 split: true, 6 tools: [{ 7 iconCls:\'icon-add\', 8 handler:function(){alert(\'add\')} 9 },{ 10 iconCls:\'icon-remove\', 11 handler:function(){alert(\'remove\')} 12 }] 13 });
区域面板选项（Region Panel Options）是定义在面板（panel）组件中，下面是一些共同的和新增的属性：
region:定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。
border:当设置为 true 时，就显示布局面板（layout panel）的边框。
split:当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。
href:从远程站点加载数据的 URL 。
方法：
2、Panel面板
通过 $.fn.panel.defaults 重写默认的 defaults。
面板（panel）当做其他内容的容器使用。它是创建其他组件（比如：Layout 布局、Tabs 标签页/选项卡、Accordion 折叠面板，等等）的基础组件。它也提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其他自定义行为。面板（panel）可以简单地嵌入到网页的任何位置。
1、通过标记创建面板（Panel）
从标记创建面板（Panel）更容易。把 \’easyui-panel\’ class 添加到 <div> 标记。
1 <div id="p" class="easyui-panel" title="My Panel" 2 style="width:500px;height:150px;padding:10px;background:#fafafa;" 3 data-options="iconCls:\'icon-save\',closable:true, 4 collapsible:true,minimizable:true,maximizable:true"> 5 <p>panel content.</p> 6 <p>panel content.</p> 7 </div>
2、编程创建面板（Panel）
让我们创建带右上角工具栏的面板（Panel）。
1 <div id="p" style="padding:10px;"> 2 <p>panel content.</p> 3 <p>panel content.</p> 4 </div> 5 $(\'#p\').panel({ 6 width:500, 7 height:150, 8 title:\'My Panel\', 9 tools:[{ 10 iconCls:\'icon-add\', 11 handler:function(){alert(\'new\')} 12 },{ 13 iconCls:\'icon-save\', 14 handler:function(){alert(\'save\')} 15 }] 16 });
3、移动面板（Panel）
调用 \’move\’ 方法把面板（Panel）移动到新位置。
1 $(\'#p\').panel(\'move\',{ 2 left:100, 3 top:100 4 });
4、加载内容
让我们通过 ajax 加载面板（panel）内容并且当加载成功时显示一些信息。
1 $(\'#p\').panel({ 2 href:\'content_url.php\', 3 onLoad:function(){ 4 alert(\'loaded successfully\'); 5 } 6 });
属性：
style：给面板（panel）添加自定义格式的样式。改变面板（panel）边框宽度的代码实例：
1 <div class="easyui-panel" style="width:200px;height:100px" 2 data-options="style:{borderWidth:2}"> 3 </div>
tools：自定义工具组，可能的值：
1、数组，每个元素包含 iconCls 和 handler 两个属性。
2、选择器，指示工具组。
面板（panel）工具组可通过已存在 <div> 标签声明：
1 <div class="easyui-panel" style="width:300px;height:200px" 2 title="My Panel" data-options="iconCls:\'icon-ok\',tools:\'#tt\'"> 3 </div> 4 <div id="tt"> 5 <a href="#" class="icon-add" onclick="javascript:alert(\'add\')"></a> 6 <a href="#" class="icon-edit" onclick="javascript:alert(\'edit\')"></a> 7 </div>
面板（panel）工具组可通过数组定义：
1 <div class="easyui-panel" style="width:300px;height:200px" 2 title="My Panel" data-options="iconCls:\'icon-ok\',tools:[ 3 { 4 iconCls:\'icon-add\', 5 handler:function(){alert(\'add\')} 6 },{ 7 iconCls:\'icon-edit\', 8 handler:function(){alert(\'edit\')} 9 }]"> 10 </div>
href：一个 URL，用它加载远程数据并且显示在面板（panel）里。请注意，除非面板（panel）打开，否则内容不会被加载。这对创建一个惰性加载的面板（panel）很有用：
1 <div id="pp" class="easyui-panel" style="width:300px;height:200px" data-options="href=\'get_content.php\',closed:true"></div> 2 <a href="#" onclick="javascript:$(\'#pp\').panel(\'open\')">Open</a>
事件：
onBeforeClose：面板（panel）关闭前触发，返回 false 就取消关闭。下面声明的面板（panel）不会关闭。
1 <div class="easyui-panel" style="width:300px;height:200px;" title="My Panel" data-options="onBeforeClose:function(){return false}"> 2 The panel cannot be closed. 3 </div>
方法：
refresh：href->刷新面板（panel）加载远程数据。如果分配了 \’href\’ 参数，将重写旧的 \’href\’ 属性。
1 // open a panel and then refresh its contents. 2 $(\'#pp\').panel(\'open\').panel(\'refresh\'); 3 // refresh contents with a new URL. 4 $(\'#pp\').panel(\'open\').panel(\'refresh\',\'new_content.php\');
resize：options->设置面板（panel）尺寸并做布局。Options 对象包含下列属性：
width：新的面板（panel）宽度
height：新的面板（panel）宽度
left：新的面板（panel）左边位置
top：新的面板（panel）顶部位置
1 $(\'#pp\').panel(\'resize\',{ 2 width: 600, 3 height: 400 4 });
3、Accordion折叠面板
通过 $.fn.accordion.defaults 重写默认的 defaults。
折叠面板（accordion）允许您提供多个面板（panel），同时显示一个或多个面板（panel）。每个面板（panel）都有展开和折叠的内建支持。点击面板（panel）头部可展开或折叠面板（panel）主体。面板（panel）内容可通过 ajax 指定 \’href\’ 属性来加载。用户可定义被选中的面板（panel）。如果为指定，则默认选中第一个面板（panel）。
通过标记创建折叠面板（Accordion），添加 \’easyui-accordion\’ class 到 <div> 标记。
1 <div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> 2 <div title="Title1" data-options="iconCls:\'icon-save\'" style="overflow:auto;padding:10px;"> 3 <h3 style="color:#0099FF;">Accordion for jQuery</h3> 4 <p>Accordion is a part of easyui framework for jQuery. 5 It lets you define your accordion component on web page more easily.</p> 6 </div> 7 <div title="Title2" data-options="iconCls:\'icon-reload\',selected:true" style="padding:10px;"> 8 content2 9 </div> 10 <div title="Title3"> 11 content3 12 </div>
我们可以改变或重建折叠面板（Accordion）后，修改某些特性。
1 $(\'#aa\').accordion({ 2 animate:false 3 });
调用 \’getSelected\’ 方法来获取当前面板（panel），然后我们可以调用面板（panel）的 \’refresh\’ 方法来加载新内容。
1 var pp = $(\'#aa\').accordion(\'getSelected\'); // 获取选中的面板（panel） 2 if (pp){ 3 pp.panel(\'refresh\',\'new_content.php\'); // 调用 \'refresh\' 方法加载新内容 4 }
面板（Panel）选项
折叠面板（Accordion）的面板（panel）选项继承自面板（panel），下面是附加的属性：
事件
方法：
getPanelIndex：panel->获取指定的面板（panel）索引。该方法自版本 1.3 起可用。
下面的实例显示如何获取选中的面板（panel）索引。
1 var p = $(\'#aa\').accordion(\'getSelected\');//获取第一个选中的面板 2 if (p){ 3 var index = $(\'#aa\').accordion(\'getPanelIndex\', p); 4 alert(index); 5 }
4、Tabs标签页/选项卡
通过 $.fn.tabs.defaults 重写默认的 defaults。
The tabs display a collection of panel. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.
依赖
- panel
- linkbutton
1、通过标记创建标签页（Tabs）
从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。记住把 \’easyui-tabs\’ class 添加到 <div> 标记。每个标签页面板（tab panel）通过子 <div> 标记被创建，其用法与面板（panel）一样。
1 <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 2 <div title="Tab1" style="padding:20px;display:none;"> 3 tab1 4 </div> 5 <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> 6 tab2 7 </div> 8 <div title="Tab3" data-options="iconCls:\'icon-reload\',closable:true" style="padding:20px;display:none;"> 9 tab3 10 </div> 11 </div>
2、编程创建标签页（Tabs）
现在我们编程创建标签页（Tabs），我们同时捕捉 \’onSelect\’ 事件。
1 $(\'#tt\').tabs({ 2 border:false, 3 onSelect:function(title){ 4 alert(title+\' is selected\'); 5 } 6 });
3、添加新的标签页面板（tab panel）
通过迷你工具添加一个新的标签页面板（tab panel），迷你工具图标（8×8）放置在关闭按钮前。
1 // 添加一个新的标签页面板（tab panel） 2 $(\'#tt\').tabs(\'add\',{ 3 title:\'New Tab\', 4 content:\'Tab Body\', 5 closable:true, 6 tools:[{ 7 iconCls:\'icon-mini-refresh\', 8 handler:function(){ 9 alert(\'refresh\'); 10 } 11 }] 12 });
4、获取选中的标签页（Tab）
// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象 var pp = $(\'#tt\').tabs(\'getSelected\'); var tab = pp.panel(\'options\').tab; // 相应的标签页（tab）对象
5、刷新tab标签页
var currentTab= $(\'#tt\').tabs(\'getSelected\'); $(\'#tt\').tabs(\'update\', { tab: currentTab, options: { href: url//远程服务链接 } }); currentTab.panel(\'refresh\');
属性
tools:array,selector->放置在头部的左侧或右侧的工具栏，可能的值：
1、数组，指示工具组，每个工具选项都和链接按钮（Linkbutton）一样。
2、选择器，指示包含工具的 <div>。
通过数组定义工具
1 $(\'#tt\').tabs({ 2 tools:[{ 3 iconCls:\'icon-add\', 4 handler:function(){ 5 alert(\'add\') 6 } 7 },{ 8 iconCls:\'icon-save\', 9 handler:function(){ 10 alert(\'save\') 11 } 12 }] 13 });
通过已有的 DOM 容器定义工具。
1 $(\'#tt\').tabs({ 2 tools:\'#tab-tools\' 3 }); 4 <div id="tab-tools"> 5 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a> 6 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a> 7 </div>
事件
onBeforeClose->title,index:当一个标签页面板（tab panel）被关闭前触发，返回 false 就取消关闭动作。下面的实例演示如何在关闭标签页面板（tab panel）前显示确认对话框。
1 $(\'#tt\').tabs({ 2 onBeforeClose: function(title){ 3 return confirm(\'Are you sure you want to close \' + title); 4 } 5 }); 6 // using the async confirm dialog 7 $(\'#tt\').tabs({ 8 onBeforeClose: function(title,index){ 9 var target = this; 10 $.messager.confirm(\'Confirm\',\'Are you sure you want to close \'+title,function(r){ 11 if (r){ 12 var opts = $(target).tabs(\'options\'); 13 var bc = opts.onBeforeClose; 14 opts.onBeforeClose = function(){}; // allowed to close now 15 $(target).tabs(\'close\',index); 16 opts.onBeforeClose = bc; // restore the event function 17 } 18 }); 19 return false; // prevent from closing 20 } 21 });
方法
add->options：添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。
当添加一个新的标签页面板（tab panel）时，它将被选中。
如需添加一个未选中的标签页面板（tab panel），请记得设置 \’selected\’ 属性为 false。
1 // add a unselected tab panel 2 $(\'#tt\').tabs(\'add\',{ 3 title: \'new tab\', 4 selected: false 5 //... 6 });
getSelected->获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。
1 var tab = $(\'#tt\').tabs(\'getSelected\'); 2 var index = $(\'#tt\').tabs(\'getTabIndex\',tab); 3 alert(index);
update->param:更新指定的标签页面板（tab panel），param 参数包含两个属性：
tab：被更新的标签页面板（tab panel）。
options：面板（panel）的选项（options）。
1 // update the selected panel with new title and content 2 var tab = $(\'#tt\').tabs(\'getSelected\'); // get selected panel 3 $(\'#tt\').tabs(\'update\', { 4 tab: tab, 5 options: { 6 title: \'New Title\', 7 href: \'get_content.php\' // the new content URL 8 } 9 }); 10 11 // call \'refresh\' method for tab panel to update its content 12 var tab = $(\'#tt\').tabs(\'getSelected\'); // get selected panel 13 tab.panel(\'refresh\', \'get_content.php\');
标签页面板（tab panel）属性被定义在面板（panel）组件里，下面是一些常用的属性。