2023年11月25日 星期六

jQuery EasyUI v1.10 學習筆記 : 頁籤面板 Tabs

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>

例如 :



<!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() 方法初始化 : 



<!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 屬性了, 結果如下 :




由於傳入 tabs() 的屬性物件中含有 plain: true 屬性, 它會取消標籤後面的背景色 (預設是藍色). 其次, 因為屬性物件中已設定 width 與 height 屬性, 因此外層 div 的 style 也不需要了. 此範例也可以用 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 預設被打開了.

沒有留言 :