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）組件裏，下面是一些經常使用的屬性。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。