Tabs 是網頁中很常用的容器, 就像標籤文件夾一樣可以將資料分門別類. 本篇記錄 EasyUI 標籤面板的用法測試, 主要是根據之前舊版 EasyUI 測試文章改寫 :
本系列之前的文章參考 :
EasyUI 使用兩層 div 元素來建構頁籤 (或稱標籤) 面板, 只要在外層 div 元素加上 easyui-tabs 樣式類別, 內層 div 用 title 屬性設定頁籤名稱即可, 不需要使用 jQuery 程式做初始化設定, 基本的 EasyUI Tabs 結構如下 :
<div class="easyui-tabs">
<div title="標籤1">這是標籤1</div>
<div title="標籤2">這是標籤2</div>
<div title="標籤3">這是標籤3</div>
</div>
也可以使用 jQuery 程式初始化, 這時就不需要在外層 div 元素套用 easyui-tabs 樣式, 而是要添加 id 屬性以便程式能取得此元件之 jQuery 物件 :
<div id="tab1">
<div title="標籤1">這是標籤1</div>
<div title="標籤2">這是標籤2</div>
<div title="標籤3">這是標籤3</div>
</div>
<script>
$(function(){
$("#tab1").tabs();
});
</script>
但是這個原始 Tabs 會與父容器 (即瀏覽器) 同寬, 高度則依照資料內容而定, 同時標籤之內容與邊框間隙很小, 故通常會使用 CSS 來設定適合的外觀, 例如 :
<div class="easyui-tabs" style="width:400px;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>
例如 :
測試 1 : 原始頁籤面板 vs 樣式設定的頁籤面板 [看原始碼]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<div class="easyui-tabs">
<div title="標籤1">這是原始標籤1</div>
<div title="標籤2">這是原始標籤2</div>
<div title="標籤3">這是原始標籤3</div>
</div><br>
<div class="easyui-tabs" style="width:400px;height:200px">
<div title="Tab1" style="padding:10px">
<p style="font-size:14px">這是 Tab1</p>
</div>
<div title="Tab2" style="padding:10px">
<p style="font-size:14px">這是 Tab2</p>
</div>
<div title="Tab3" style="padding:10px">
<p style="font-size:14px">這是 Tab3</p>
</div>
</div>
<script>
$(function(){
});
</script>
</body>
</html>
此處疊了兩組頁籤面板, 上面是原始的, 下面是使用 CSS 設定尺寸的, 結果如下 :
除了使用 data-options 屬性設定頁籤面板外, 也可以使用 jQuery 物件的 tabs() 方法進行初始化, 這時必須在外層 div 元素上添加 id 屬性, 這樣才能透過 $("#tab_id") 取得 div 元素之 jQuery 物件, 呼叫其 tabs() 方法, 即可建立 Tabs 元件, 語法如下 :
$("#tab1").tabs({屬性物件})
呼叫 tabs() 方法可傳入一個屬性物件來初始化 Tabs 物件, 外層 div 之 data-options 屬性用來設定整個頁籤面板之屬性 :
| 外層 div 之 data-options 屬性 | 說明 |
| width | 頁籤面板寬度 (px 數值) |
| height | 頁籤面板高度 (px 數值) |
| plain | 設為 true 可去除頁籤之背景色 (預設 false) |
| tabPosition | 頁籤位置, "left" (左), "right" (右), "top" (上, 預設), "bottom" (下) |
| tabWidth | 每個頁籤寬度 (px 數值, 依照頁籤內容自動調整) |
| tabHeight | 每個頁籤高度 (px 數值, 預設 27) |
| headerWidth | 設定 tabPosition="left"/"right" 時每個頁籤寬度 (px 數值, 預設 150) |
| selected | 設定預設被開啟的頁籤之索引 (0 起始), 預設 0 |
內層 div 之 data-options 屬性用來設定該頁籤之屬性 :
| 內層 div 之 data-options 屬性 | 說明 |
| closable | 設為 true 時頁籤右方會出現 x 刪除鈕 (預設 false) |
| collapsible | 設為 true 時頁籤可隱藏 |
| href | 以 Ajax 方式從後端檔案或程式 URL 取得頁籤要顯示的內容 |
| title | 頁籤的標頭文字 |
| content | 頁籤的內容 |
| tools | 指定工具按鈕的 id |
例如上面使用 data-options 的範例可以改成呼叫 tabs() 方法初始化 :
測試 2 : 使用 tabs() 方法初始化標籤面板 [看原始碼]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<div id="tab1">
<div title="Tab1" style="padding:10px">
<p style="font-size:14px">這是 Tab1</p>
</div>
<div title="Tab2" style="padding:10px">
<p style="font-size:14px">這是 Tab2</p>
</div>
<div title="Tab3" style="padding:10px">
<p style="font-size:14px">這是 Tab3</p>
</div>
</div>
<script>
$(function(){
$("#tab1").tabs({
width:400,
height:200,
plain: true
});
});
</script>
</body>
</html>
外層 div 元素添加了 id="tab1" 屬性以便能用 $("#tab1") 取得該 div 之 jQuery 物件, 然後在呼叫 tabs() 方法時傳入 width 與 height 以及 plain 組成之屬性物件進行初始化, 注意, 使用 tabs() 時就不需要在外層 div 元素中使用 data-options 屬性了, 結果如下 :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<div class="easyui-tabs" style="width:400px;height:200px">
<div title="Tab1" style="padding:10px">
<p style="font-size:14px">這是 Tab1</p>
</div>
<div title="Tab2" style="padding:10px">
<p style="font-size:14px">這是 Tab2</p>
</div>
<div title="Tab3" style="padding:10px">
<p style="font-size:14px">這是 Tab3</p>
</div>
</div><br>
<div class="easyui-tabs" data-options="width:400, height: 200, plain:true">
<div title="Tab1" style="padding:10px">
<p style="font-size:14px">這是 Tab1</p>
</div>
<div title="Tab2" style="padding:10px">
<p style="font-size:14px">這是 Tab2</p>
</div>
<div title="Tab3" style="padding:10px">
<p style="font-size:14px">這是 Tab3</p>
</div>
</div>
<script>
$(function(){
});
</script>
</body>
</html>
此例使用兩個標籤面板來對比 plain:true 的效果, 上面的 Tabs 沒有用 data-options 來初始化 Tabs 元件, 只用 style 來設定其尺寸, 預設標籤有背景色. 下面的 Tabs 元件則使用 data-options 來初始化, 其中的 plain: true 屬性用來去除背景色. 注意, data-options 中的各屬性須以逗號隔開, 不可用分號 (會出現 token error), 結果如下 :
此例下方的標籤面板因為有添加 "plain:true" 屬性, 所以標籤後面的背景色被去除了. 一般的頁籤功能使用 data-options 屬性就能達成, 但互動性高的操作較複雜, 需要用 jQuery 程式才能達成.
當頁籤數量增加, 總寬度超過整個頁籤面板時, 會在頁籤面板左右兩端出現 << 與 >> 滑動鈕, 按下時會讓頁籤滑動以顯示被遮住的頁籤, 例如 :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<div class="easyui-tabs" data-options="width:400, height: 200">
<div title="Tab1" style="padding:10px">
<p style="font-size:14px">這是 Tab1</p>
</div>
<div title="Tab2" style="padding:10px">
<p style="font-size:14px">這是 Tab2</p>
</div>
<div title="Tab3" style="padding:10px">
<p style="font-size:14px">這是 Tab3</p>
</div>
<div title="Tab4" style="padding:10px">
<p style="font-size:14px">這是 Tab4</p>
</div>
<div title="Tab5" style="padding:10px">
<p style="font-size:14px">這是 Tab5</p>
</div>
<div title="Tab6" style="padding:10px">
<p style="font-size:14px">這是 Tab6</p>
</div>
<div title="Tab7" style="padding:10px">
<p style="font-size:14px">這是 Tab7</p>
</div>
<div title="Tab8" style="padding:10px">
<p style="font-size:14px">這是 Tab8</p>
</div>
<div title="Tab9" style="padding:10px">
<p style="font-size:14px">這是 Tab9</p>
</div>
</div>
<script>
$(function(){
});
</script>
</body>
</html>
結果如下 :
頁籤面板預設會打開第一個頁籤, 但可以透過 selected 指定預設要開啟哪一個頁籤, 例如 :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<div class="easyui-tabs" data-options="width:400, height: 200, selected: 2">
<div title="Tab1" style="padding:10px">
<p style="font-size:14px">這是 Tab1</p>
</div>
<div title="Tab2" style="padding:10px">
<p style="font-size:14px">這是 Tab2</p>
</div>
<div title="Tab3" style="padding:10px">
<p style="font-size:14px">這是 Tab3</p>
</div>
</div>
<script>
$(function(){
});
</script>
</body>
</html>
此例設定 selected: 2 表示預設開啟第 3 個頁籤, 結果如下 :
可見當瀏覽器一開啟此網頁, Tab3 預設被打開了.
沒有留言:
張貼留言