# ExtJS 4 測試 : 頁籤面板 TabPanel
# Java Swing 測試 : 頁籤面板 JTabbedPane
jQuery UI 的頁籤我沒測試過, 但之前使用 jQuery UI 寫了一個簡易架站軟體, 使用的容器就是 Tabs. EasyUI 的頁籤面板跟摺疊選單一樣都是利用兩層 div 元素建構的 (其實兩個很像), 跟 jQuery UI 基本上相同, 不同的是, jQuery UI 的頁籤標題需另外使用 ul-li 來做, 而 EasyUI 則直接在內層 div 元素的 title 屬性裡. 其 API 參見 :
# jQuery EasyUI Tabs
EasyUI 的頁籤使用兩層 div, 外層設定頁籤整體屬性如尺寸, 內層則是設定各頁屬性與內容, 如下面範例 1 所示 :
範例 1 : http://tony1966.xyz/test/easyuitest/easyui-tabs-1.htm [看原始碼]
<div class="easyui-tabs">
<div title="標題 1">內容 1</div>
<div title="標題 2">內容 2</div>
<div title="標題 3">內容 3</div>
</div>
這與摺疊選單唯一的差別只是套用的樣式類別, 事實上我是將 accordion 的範例 1 複製過來改一下 class 而已, 參考 :
# jQuery EasyUI 測試 : Accordion 摺疊選單
由上例可知, 頁籤預設會佔據整個瀏覽器寬度, 可以用外層 div 的 style 屬性之 width, height 來限制; 其次, 頁籤內容與邊框間隙預設為 0px, 這必須用內層 div 的 style 之 padding 來設定, 如範例 2 所示 :
範例 2 : http://tony1966.xyz/test/easyuitest/easyui-tabs-2.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
可見開啟的頁籤, 其標題會自動改為粗體, 而且預設標籤列背後有延伸邊框圍起來的背景. 這標籤列背景是可以取消的, 只要在外層 div 的 data-options 屬性中將 plain 設為 true 即可, 如範例 3 所示 :
範例 3 : http://tony1966.xyz/test/easyuitest/easyui-tabs-3.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="plain:true">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
ExtJS 的頁籤列可以在上下左右位置, EasyUI 也是可以的, 只要設定 tabPosition 屬性即可, 其值有四 : top (預設), bottom, left, right, 如下範例 4 :
範例 4 : http://tony1966.xyz/test/easyuitest/easyui-tabs-4.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabPosition:'bottom'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
範例 5 是頁籤在左方的情形 :
範例 5 : http://tony1966.xyz/test/easyuitest/easyui-tabs-5.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabPosition:'left'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
看來頁籤標題似乎太寬了, 這是因為 headerWidth 屬性預設為 150px 之故. 下面範例 6 將其限縮為 80px :
範例 6 : http://tony1966.xyz/test/easyuitest/easyui-tabs-6.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabPosition:'left',headerWidth:80">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
注意, headerWidth 只有在 tabPosition 為 left 或 right 時才會有作用. 標籤的尺寸除了控制左右方向時標籤寬度的 headerWidth 外, 還有 tabWidth 與 tabHeight, 如範例 7 所示 :
範例 7 : http://tony1966.xyz/test/easyuitest/easyui-tabs-7.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabWidth:100,tabHeight:50">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
這 tabHeight 預設是 27px, 而 tabWidth 為依據標題寬度自動調整. 可知當標籤總寬度超出面板寬度時左右會出現前進後退按鈕 (tab scroll). 這個 tab scroll 鈕按下時會跑多少 px 可以利用 scrollIncrement 屬性來指定, 預設是 100px; 而標籤移動速度也可以用 scrollDuration 來設定, 預設 400ms, 這兩個都不是很重要, 所以就不予測試啦.
如果將標籤位置改成右方, 則如範例 8 所示 :
範例 8 : http://tony1966.xyz/test/easyuitest/easyui-tabs-8.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabWidth:100,tabHeight:50,tabPosition:'right'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
因為全部標籤總高未超過面板高度,因此這個就沒有 tab scroll 出現.
標籤面板預設是開啟第一個標籤, 但可以用 selected 屬性指定預設開啟的標籤索引 (0 起始), 如範例 9 所示 :
範例 9 : http://tony1966.xyz/test/easyuitest/easyui-tabs-9.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="selected:2">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
可見網頁一載入就預設開啟第三個標籤 (索引 2).
每一個標籤可以附上關閉鈕, 只要在內層 div 的 data-options 屬性設定 closable 為 true 即可, 如範例 10 所示 :
範例 10 : http://tony1966.xyz/test/easyuitest/easyui-tabs-10.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" >
<div title="標題 1" style="padding:10px;" data-options="closable:true">內容 1</div>
<div title="標題 2" style="padding:10px;" data-options="closable:true">內容 2</div>
<div title="標題 3" style="padding:10px;" data-options="closable:true">內容 3</div>
</div>
點擊標籤右端的叉叉就可以關閉標籤.
此外也可以在標籤列的左方或右方 (預設) 加上按鈕, 這要在外層 div 元素的 data-options 屬性中設定 tools, 如範例 11 所示 :
範例 11 : http://tony1966.xyz/test/easyuitest/easyui-tabs-11.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="add" class="easyui-linkbutton" iconCls="icon-add">新增</a>
<a href="#" id="remove" class="easyui-linkbutton" iconCls="icon-remove">刪除</a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#add").bind("click",function(){
$.messager.alert("Info","新增");
});
$("#remove").bind("click",function(){
$.messager.alert("Info","移除");
});
});
</script>
這兩個按鈕要用 div 包起來, 賦予一個 id, 以便 tools 中予以指定. 為了給這兩個按鈕綁定事件, 所以都要給予 id. 為了簡化起見, 目前暫時顯示訊息框即可.
為了節省標籤列空間或是為了簡潔, 也可以只顯示按鈕的 icon, 只要刪除連結按鈕中的超連結文字內容, 並加上 plain="true" 屬性即可, 如範例 12 所示 :
範例 12 : http://tony1966.xyz/test/easyuitest/easyui-tabs-12.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="add" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" id="remove" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#add").bind("click",function(){
$.messager.alert("Info","新增");
});
$("#remove").bind("click",function(){
$.messager.alert("Info","移除");
});
});
</script>
工具按鈕預設是在標籤列右端, 若要改為左端, 要將 toolPosition 屬性設為 "left" (預設是 "right"), 如範例 12-1 所示 :
範例 12-1 : http://tony1966.xyz/test/easyuitest/easyui-tabs-12-1.htm [看原始碼]
<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1',toolPosition:'left'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="add" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" id="remove" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#add").bind("click",function(){
$.messager.alert("Info","新增");
});
$("#remove").bind("click",function(){
$.messager.alert("Info","移除");
});
});
</script>
以上範例都是用 HTML5 設定, 都可以用 Javascript 來做, 在下列範例 13 中, 也同時測試 getSelected, getTabIndex, 以及 add 與 close 這四個方法 :
範例 13 : http://tony1966.xyz/test/easyuitest/easyui-tabs-13.htm [看原始碼]
<div id="tab1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({
width:300,
height:200,
tools:[{
iconCls:'icon-add',
handler:function(){
$("#tab1").tabs("add",{title:"新頁籤",content:"Hello!"});
}
},{
iconCls:'icon-remove',
handler:function(){
var tab=$("#tab1").tabs("getSelected"); //傳回選單之 Panel 物件
if (tab){
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("close",index);
}
}
}]
});
});
</script>
此例中, 外層 div 只要給個 id 即可, 其餘交給 Javascript 處理. 按下新增鈕時會呼叫 add 方法, 在既有頁籤最後面添加一個新的頁籤, 並且預設開啟新頁籤, 如果不要開啟新頁籤, 那麼必須加上 selected:false 設定. 當按下刪除鈕時, 先呼叫 getSelected 方法取得目前開啟中的頁籤物件 (一個 Panel), 然後呼叫 getTabIndex 方法取得此頁籤之索引, 最後呼叫 close 方法即可刪除該頁籤.
參考資料 :
# jQuery EasyUI实现关闭全部tabs
從上面範例 13 可知, 新增頁籤後會開啟剛增加的頁籤, 但刪除一個頁籤後, 卻總是開啟第一個頁籤. 如何讓刪除頁籤後開啟最後的頁籤呢? 可以利用 tabs 與 select 方法來做, tabs 會傳回全部的頁籤物件集合, 因此其 length 屬性便是所有頁籤個數, 而 length-1 便是最後一個頁籤的索引. select 方法則會開啟指定之頁籤, 我們將範例 13 加兩行指令改成範例 14 如下 :
範例 14 : http://tony1966.xyz/test/easyuitest/easyui-tabs-14.htm [看原始碼]
<div id="tab1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({
width:300,
height:200,
tools:[{
iconCls:'icon-add',
handler:function(){
$("#tab1").tabs("add",{title:"新頁籤",content:"Hello!"});
}
},{
iconCls:'icon-remove',
handler:function(){
var tab=$("#tab1").tabs("getSelected");
if (tab){
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("close",index);
var tabs=$("#tab1").tabs("tabs");
$("#tab1").tabs("select",tabs.length-1);
}
}
}]
});
});
</script>
這樣便不會每次刪除完就回第一個頁籤了, 而且頁籤列會左右來回跑, 很有韻律感.
以上範例的頁籤內容均來自網頁本身, 實務上更常是來自後端程式所提供, 如同摺疊選單一樣, 可以用 href 屬性指定後端檔案或程式, 以 Ajax 方式自後端擷取資料, 我們修改範例 14 為下面的範例 15, 在新增頁籤時指定資料來源為後端 PHP 程式 :
範例 15 : http://tony1966.xyz/test/easyuitest/easyui-tabs-15.htm [看原始碼]
<div id="tab1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({
width:300,
height:200,
tools:[{
iconCls:'icon-add',
handler:function(){
$("#tab1").tabs("add",{
title:"新頁籤",
collapsible:true,
closable:true,
href:"hellosomebody-get.php?name=Tony&surname=Huang",
loadingMessage:"載入中..."
});
}
},{
iconCls:'icon-remove',
handler:function(){
var tab=$("#tab1").tabs("getSelected");
if (tab){
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("close",index);
var tabs=$("#tab1").tabs("tabs");
$("#tab1").tabs("select",tabs.length-1);
}
}
}]
});
});
</script>
新頁籤 collapsed
<?php
header('Content-Type: text/html;charset=UTF-8');
$name=$_GET["name"];
$surname=$_GET["surname"];
echo "Hello! ".$name." ".$surname."<br>".
"The time is ".date("Y-m-d H:i:s");
?>
參考 :
# jQuery EasyUI 測試 : Panel 面板
此例中除了測試 href 屬性外, 還添加了 closable 與 collapsible 屬性, closable 前面已經測過, 會在頁籤上顯示一個叉叉圖示, 可用來移除頁籤, 但與 tools 工具列的刪除鈕不同的是, 因為沒有經過 handler 處理, 所以刪除後不會打開最後一個頁籤, 而是預設打開第一個頁籤; 而 collapsible 在摺疊選單是用來縮合或展開選單用的, 在頁籤面板中則是用來隱藏或開啟頁籤. 所以如果點擊新增頁籤, 它會在開啟與關閉之間切換 (toggle), 而最初那三個頁籤卻無此功能 (因為 collapsible 預設為 false). 其次, 既然頁籤面板也是用 Panel 做的, 那麼 Panel 的屬性當然可以使用, 此例我們用 loadingMessage 屬性改預設的 "Loading..." 為 "載入中...".
當然也可以改為 POST 方法傳遞參數, 如範例 15-1 所示 :
範例 15-1 : http://tony1966.xyz/test/easyuitest/easyui-tabs-15-1.htm [看原始碼]
<div id="tab1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({
width:300,
height:200,
tools:[{
iconCls:'icon-add',
handler:function(){
$("#tab1").tabs("add",{
title:"新頁籤",
collapsible:true,
closable:true,
href:"hellosomebody-post.php",
method:"post",
queryParams:{name:"Tony",surname:"Huang"},
loadingMessage:"載入中..."
});
}
},{
iconCls:'icon-remove',
handler:function(){
var tab=$("#tab1").tabs("getSelected");
if (tab){
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("close",index);
var tabs=$("#tab1").tabs("tabs");
$("#tab1").tabs("select",tabs.length-1);
}
}
}]
});
});
</script>
此例使用 POST 方法必須設定 method 屬性為 post, 參數則用 queryParams 屬性設定.
如果覺得上面的範例太複雜, 我們回過頭來簡化一些, 下面範例 16 要展示如何純粹用 Javascript 來建立頁籤面板 :
範例 16 : http://tony1966.xyz/test/easyuitest/easyui-tabs-16.htm [看原始碼]
<div id="tab1"></div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({width:300,height:200}); //初始化
$("#tab1").tabs("add",{title:"標題 1",content:"內容 1"});
$("#tab1").tabs("add",{title:"標題 2",content:"內容 2"});
$("#tab1").tabs("add",{title:"標題 3",content:"內容 3"});
var tabs=$("#tab1").tabs("tabs");
for (var i=0; i<tabs.length; i++){
tabs[i].css("padding","10px");
}
});
</script>
此例中, 頁籤面板容器就只是一個僅含 id 屬性的 div 元素, 整個效果完全由 Javascript 建立. 首先傳入尺寸物件將面板初始化, 這是必要的, 不可以直接呼叫 add 方法新增頁籤, 初始化時也可以不傳入任何東西, 這樣就會採用預設值 (寬度最寬, 高度 auto).
初始化後才可以依序 add 新增頁籤, 但預設 padding 是 0px, 因此我們要為每一個頁籤的 Panel 物件添加 CSS 樣式. 透過呼叫 tabs 方法可取得所有頁籤之 Panel 物件陣列, 再逐一拜訪每個 Panel, 利用 css 方法來設定其 padding 樣式.
接下來要測試 update 方法, 可以隨時更新頁籤的屬性值, 例如標題 title, 內容 content, 遠端資料來源 href 等, 如下範例 17 :
範例 17 : http://tony1966.xyz/test/easyuitest/easyui-tabs-17.htm [看原始碼]
<div id="tab1" class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="update" class="easyui-linkbutton" plain="true">更新</a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#update").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
$("#tab1").tabs("update",{
tab:tab,
options:{
title:"新標籤",
href:"hellosomebody-get.php?name=Tony&surname=Huang"
}
});
});
});
</script>
這裡我們在標籤列右端放一個更新按鈕, 按下此鈕會呼叫 update 方法更新所選頁籤之內容為遠端 hellosombody-get.php 所提供之內容. 要更新的對象放在物件實體中, tab 屬性值為要更新的頁籤 Panel, 而更新內容全部放在 options 屬性中.
當然也可以用 POST 方法傳送參數, 如範例 17-1 :
範例 17-1 : http://tony1966.xyz/test/easyuitest/easyui-tabs-17-1.htm [看原始碼]
$(document).ready(function(){
$("#update").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
$("#tab1").tabs("update",{
tab:tab,
options:{
title:"新標籤",
href:"hellosomebody-post.php",
method:"post",
queryParams:{name:"Tony",surname:"Huang"},
loadingMessage:"載入中 ... "
}
});
});
});
第二種寫法是用源自 Panel 物件的 refresh 方法, 如下列範例 18 :
範例 18 : http://tony1966.xyz/test/easyuitest/easyui-tabs-18.htm [看原始碼]
$("#update").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
var href="hellosomebody-get.php?name=Tony&surname=Huang";
tab.panel("refresh", href);
});
這裡只列出程式碼不同的部分, 其餘與上面範例 18 相同. 這兩種用法效果是一樣的.
接下來要測試 select 與 unselect 方法, select 就是選取或開啟指定頁籤, 而 unselect 就是取消選取指定頁籤, 該頁籤內容不會在下方內容區顯示, 兩者都要傳入代表頁籤的參數, 例如索引或標題.
範例 19 : http://tony1966.xyz/test/easyuitest/easyui-tabs-19.htm [看原始碼]
<div id="tab1" class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="select" class="easyui-linkbutton" plain="true">Select</a>
<a href="#" id="unselect" class="easyui-linkbutton" plain="true">Unselect</a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#unselect").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("unselect",index);
});
$("#select").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
$("#tab1").tabs("select",1);
});
});
</script>
此處按下 Unselect 鈕會將目前開啟中的頁籤隱藏, 而按下 Unselect 則固定開啟第二個頁籤 (索引 1).
最後來測試 enableTab 與 disableTab 這兩個方法. 所謂 Disable 是指該頁籤無法被選 (unselectable), 頁籤會變成淡色.
範例 20 : http://tony1966.xyz/test/easyuitest/easyui-tabs-20.htm [看原始碼]
<div id="tab1" class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="enable" class="easyui-linkbutton" plain="true">Enable All</a>
<a href="#" id="disable" class="easyui-linkbutton" plain="true">Disable</a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#disable").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("disableTab",index);
});
$("#enable").bind("click",function(){
var tabs=$("#tab1").tabs("tabs"); //取得全部頁籤 Panel
for (var i=0; i<tabs.length; i++){
var index=$("#tab1").tabs("getTabIndex",tabs[i]);
$("#tab1").tabs("enableTab",index);
}
});
});
</script>
此例中, 按 Disable 鍵會把目前打開的頁籤變成不可選, 而 Enable All 鍵則將全部頁籤變成可選, 這裡是利用呼叫 tabs 方法取得全部頁籤之 Panel 物件, 在逐一拜訪每一個頁籤時, 呼叫 disable 方法使其不可選.
OK, 頁籤面板測試完畢.
1 則留言 :
讚! 寫的非常詳細,獲益良多,謝謝!
張貼留言