easyui系列之布局Layout,Panel,Accordion,Tabs（1）

时间 2020-05-30

标签 easyui 系列布局 layout panel accordion tabs 繁體版

原文原文链接

一、Layout布局

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

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

一、经过标记建立布局（Layout）。java

添加 'easyui-layout' class 到 <div> 标记。web

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>

二、经过 ajax 加载内容。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）组件中，下面是一些共同的和新增的属性：async

region:定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。工具

border:当设置为 true 时，就显示布局面板（layout panel）的边框。布局

split:当设置为 true 时，就显示拆分栏，用户能够用它改变面板（panel）的尺寸。

href:从远程站点加载数据的 URL 。

方法：

二、Panel面板

经过 $.fn.panel.defaults 重写默认的 defaults。

面板（panel）当作其余内容的容器使用。它是建立其余组件（好比：Layout 布局、Tabs 标签页/选项卡、Accordion 折叠面板，等等）的基础组件。它也提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其余自定义行为。面板（panel）能够简单地嵌入到网页的任何位置。

一、经过标记建立面板（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>

二、编程建立面板（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 });

三、移动面板（Panel）

调用 'move' 方法把面板（Panel）移动到新位置。

1 $('#p').panel('move',{ 2     left:100, 3     top:100
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：自定义工具组，可能的值：
一、数组，每一个元素包含 iconCls 和 handler 两个属性。
二、选择器，指示工具组。

面板（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 });

三、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 }

四、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

一、经过标记建立标签页（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>

二、编程建立标签页（Tabs）

如今咱们编程建立标签页（Tabs），咱们同时捕捉 'onSelect' 事件。

1 $('#tt').tabs({ 2     border:false, 3     onSelect:function(title){ 4         alert(title+' is selected'); 5  } 6 });

三、添加新的标签页面板（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 });

四、获取选中的标签页（Tab）

// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // 相应的标签页（tab）对象

五、刷新tab标签页

var currentTab= $('#tt').tabs('getSelected'); $('#tt').tabs('update', { tab: currentTab, options: { href: url//远程服务连接
 } }); currentTab.panel('refresh');

属性

tools:array,selector->放置在头部的左侧或右侧的工具栏，可能的值：
一、数组，指示工具组，每一个工具选项都和连接按钮（Linkbutton）同样。
二、选择器，指示包含工具的 <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）组件里，下面是一些经常使用的属性。