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="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="100px;"></div> 5 <div data-options="region:'west',title:'West',split:true" style="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="180px" ></div> 3 <div data-options="region:'center',href:'center_content.php'" ></div> 4 </body>
通过工具按钮添加西区面板
1 $('#cc').layout('add',{ 2 region: 'west', 3 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="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 > 2 <p>panel content.</p> 3 <p>panel content.</p> 4 </div> 5 $('#p').panel({ 6 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="200px;height:100px" 2 data-options="style:{borderWidth:2}"> 3 </div>
tools：自定义工具组，可能的值：
1、数组，每个元素包含 iconCls 和 handler 两个属性。
2、选择器，指示工具组。
面板（panel）工具组可通过已存在 <div> 标签声明：
1 <div class="easyui-panel" style="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="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="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="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 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="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="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），迷你工具图标（8x8）放置在关闭按钮前。
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）组件里，下面是一些常用的属性。