jQuery EasyUI 測試 : Accordion 摺疊選單

Accordion 是手風琴的意思, 亦即此 UI 可以像手風琴那樣展開與縮合, 它的每一個選單都是一個 Panel, 所以 Panel 的屬性與方法皆可用來操控每一個選單. 其 API 文件參考 :

# EasyUI Accordion

EasyUI 的折疊選單是用兩層 div 元素做的, 而 jQueryUI 則是用 ul-li 來做. EasyUI 只要在第一層的 div 指定樣式類別為 easyui-aaacordion, 第二層的 div 加上 title 屬性即可, 如下列範例 1 所示 :

測試範例 1 : http://tony1966.xyz/test/easyuitest/easyui-accordion-1.htm [看原始碼]

  <div class="easyui-accordion">
    <div title="標題 1">內容 1</div>
    <div title="標題 2">內容 2</div>
    <div title="標題 3">內容 3</div>
  </div>

點擊選單標題的任何地方, 都可以打開該選單, 不必去點標題右端的縮合/展開 icon. 這跟 Panel 不同, Panel 的 collapsible 設為 true 時, 右方也會出現一個縮合/展開鈕, 但一定要點該 icon 才會動作.

其次, 摺疊選單預設會佔據整個瀏覽器寬度, 如果要限制其大小, 可指定 style 樣式的 width 與 height, 如範例 2 所示 :

測試範例 2 : http://tony1966.xyz/test/easyuitest/easyui-accordion-2.htm [看原始碼]

  <div class="easyui-accordion" style="width:300px;height:200px;">
    <div title="標題 1">內容 1</div>
    <div title="標題 2">內容 2</div>
    <div title="標題 3">內容 3</div>
  </div>

可見雖然內容很少, 但高度仍會拉到所指定之數值. 不過還有一個問題, 每一個摺疊的內容緊貼外框, 若要設定餘裕或間隙, 要在第二層的 div 元素中設定 padding 樣式, 如範例 3 所示 :

測試範例 3 : http://tony1966.xyz/test/easyuitest/easyui-accordion-3.htm [看原始碼]

  <div class="easyui-accordion" 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>

我們也可以在標題前面添加 icon, 只要在每個選單的 div 元素
中的 data-options 屬性中設定 iconCls 即可, 如範例 3-1 所示 :

測試範例 3-1 : http://tony1966.xyz/test/easyuitest/easyui-accordion-3-1.htm [看原始碼]

  <div class="easyui-accordion" style="width:300px;height:200px;">
    <div title="標題 1" style="padding:10px;" data-options="iconCls:'icon-save'">內容 1</div>
    <div title="標題 2" style="padding:10px;">內容 2</div>
    <div title="標題 3" style="padding:10px;">內容 3</div>
  </div>

從以上範例可知, 摺疊選單預設會打開第一個選單 的內容, 如果要指定預設開啟之選單, 可在 data-options 中用 selected 屬性, 其值為 0 起始的選項 id, 如範例 4 所示 :

測試範例 4 : http://tony1966.xyz/test/easyuitest/easyui-accordion-4.htm [看原始碼]

  <div class="easyui-accordion" style="width:300px;height:200px;" data-options="selected: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>

可見 selected 設為 1 預設開啟第二個選單. 預設開啟選單也可以在個別選項中同樣以 selected 屬性設定, 但不同的是, 其值為 true/false, 如範例 5 所示 :

測試範例 5 : http://tony1966.xyz/test/easyuitest/easyui-accordion-5.htm [看原始碼]

  <div class="easyui-accordion" style="width:300px;height:200px;">
    <div title="標題 1" style="padding:10px;">內容 1</div>
    <div title="標題 2" style="padding:10px;" data-options="selected:true">內容 2</div>
    <div title="標題 3" style="padding:10px;">內容 3</div>
  </div>

結果與範例 4 一樣, 預設第二個選項被打開. 那我們可否一次打開多個選單呢? 這可以用 multiple:true 來設定, 如範例 6 所示 :

測試範例 6 : http://tony1966.xyz/test/easyuitest/easyui-accordion-6.htm [看原始碼]

  <div class="easyui-accordion" style="width:300px;" data-options="multiple: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>

可見 multiple 設為 true 後, 可一次開啟多個選項, 已打開的選單需人工縮合, 不會自動縮合. 注意, 此處為了能顯示全部被展開的選單, 不設定 height 樣式.

以上都是用 HTML5 來設定, 也可以用 Javascript 來設定, 例如可將上面範例 6 改為如下範例 7 :

測試範例 7 : http://tony1966.xyz/test/easyuitest/easyui-accordion-7.htm [看原始碼]

  <div id="acc1">
    <div title="標題 1">內容 1</div>
    <div title="標題 2">內容 2</div>
    <div title="標題 3">內容 3</div>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#acc1").accordion({
        width:300,
        multiple:true
        });
      var panels=$("#acc1").accordion("panels");
      for (var i=0; i<panels.length; i++) {
        panels[i].css("padding","10px");
        }
      });
  </script>

範例 7 中, HTML 部分只要設定第一層 div 元素之 id 即可, 其他均透過 jQuery 來設定. 摺疊選單屬性用物件形式傳入 accordion() 方法中, 而各選單的 padding 樣式則透過呼叫 panels 方法取得所有選單包裹物件, 再逐一拜訪這些選單, 利用 css() 方法來設定每一個選單的樣式.

接下來要測試 accordion 的事件與方法, 較常用的是 onSelect 事件, 即點擊選單標題之動作, 會觸發此事件. 同時也測試 getSelected 與 getPanelIndex 方法, 前者會傳回被選擇之 Panel 物件, 後者則傳回指定 Panel 物件之索引, 如下列範例 8 所示 :

測試範例 8 : http://tony1966.xyz/test/easyuitest/easyui-accordion-8.htm [看原始碼]

  <div id="acc1">
    <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(){
      $("#acc1").accordion({
        width:300,
        height:200,
        onSelect:function(){
          var p=$("#acc1").accordion("getSelected");  //被選擇之選單 Panel
          if (p){
            var id=$("#acc1").accordion("getPanelIndex",p);
            $.messager.alert("Info",id);
            }        
          }
        });
      });
  </script>

此例我們先呼叫 getSelected 方法取得被選擇選單之 Panel 物件, 再呼叫 getPanelIndex 方法, 並傳入此 Panel 物件, 即可取得該 Panel 的索引.

以上所有範例都是由網頁本身提供各選單內容, 可否用 Ajax 由遠端網頁或程式提供內容呢? 可以的, 這必須用到由 Panel 繼承而來的 refresh 方法才行, 既然 Accordion 的每一個選單都是用 Panel 做的, 只要用 getSelected 方法取得所選的選單 Panel 物件, 就可以呼叫其 refresh 方法了, 如下列範例 9 所示 :

測試範例 9 : http://tony1966.xyz/test/easyuitest/easyui-accordion-9.htm [看原始碼]

  <div id="acc1">
    <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(){
      $("#acc1").accordion({
        width:300,
        height:200,
        onSelect:function(){
          var p=$("#acc1").accordion("getSelected");
          var href="hellosomebody-get.php?name=Tony&surname=Huang";
          if (p){
            p.panel("refresh",href);
            }        
          }
        });
      });
  </script>

可見網頁一載入時便會執行 onSelect 事件, 把預設的選單內容更新為後端程式所提供的資訊, 因為網頁載入時同時預設會選擇第一個選單, 會觸發 onSelect 事件. 此例中, 我們用到了上回測試 Panel 元件時所寫的後端 PHP 程式 hellosomebody-get.php 來提供選單內容, 利用 GET 方法傳入兩個參數 name 與 surname, 程式如下 :

<?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

注意, 範例 9 中等候內容載入的訊息是 Panel 元件預設的 "Loading ...", 要怎麼去修改為 "載入中..." 呢? 這要用到 options 方法, 作為 getter 方法時它會傳回 accordion 的全部屬性與方法, 但作為 setter 方法時則可以更改屬性內容, 如下列範例 10 所示 :

測試範例 10 : http://tony1966.xyz/test/easyuitest/easyui-accordion-10.htm [看原始碼]

  <div id="acc1">
    <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(){
      $("#acc1").accordion({
        width:300,
        height:200,
        onSelect:function(){
          var p=$("#acc1").accordion("getSelected");
          var href="hellosomebody-get.php?name=Tony&surname=Huang";
          if (p){
            p.panel("options").loadingMessage="載入中...";
            p.panel("refresh",href);
            }        
          }
        });
      });
  </script>

瞧, 這樣便將預設的載入訊息給改掉了. 參考 :

# http://www.jeasyui.com/forum/index.php?topic=4125.0

也可以將屬性物件傳入 Panel 物件, 但那樣會用單純的 Panel 蓋掉 Accordion 改造過的 Panel, 變成一定要點縮合/展開鈕才能變換選單, 而且打開中的選單標題不會變色, 如下範例 10-1 所示 :

測試範例 10-1 : http://tony1966.xyz/test/easyuitest/easyui-accordion-10-1.htm [看原始碼]

    $(document).ready(function(){
      $("#acc1").accordion({
        width:300,
        height:200,
        onSelect:function(){
          var p=$("#acc1").accordion("getSelected");
          var href="hellosomebody-get.php?name=Tony&surname=Huang";
          if (p){
            p.panel({loadingMessage:"載入中..."});
            p.panel("refresh",href);
            }        
          }
        });
      });

雖然 accordion 功能不變, 但點標題卻不能縮合/展開較不方便, 因此不建議用這種方式.

接著要測試 add 與 remove 這兩個方法, 用來新增與移除選單. 新增的選單會放在所有既存選單的最後面, 預設會開啟新增的那個選單, 如果不要開啟它, 新增時要將 selected 屬性設為 false. 刪除時則會刪除目前打開的選單, 如下列範例 11 所示 :

測試範例 11 : http://tony1966.xyz/test/easyuitest/easyui-accordion-11.htm [看原始碼]

  <a href="#" id="add">新增</a>
  <a href="#" id="remove">刪除</a><br><br>
  <div id="acc1" class="easyui-accordion" style="width:300px;">
    <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(){
      $("#add").linkbutton({
        iconCls:"icon-add"
        });
      $("#add").bind("click",function(){
        $("#acc1").accordion("add", {
          title:"新選單",
          content:"Hello World!",
          });
        });
      $("#remove").linkbutton({
        iconCls:"icon-remove"
        });
      $("#remove").bind("click",function(){
        var p=$("#acc1").accordion("getSelected");
        if (p){
          var id=$("#acc1").accordion("getPanelIndex",p);
          $("#acc1").accordion("remove",id)
          }         
        });           
      });
  </script>

此例中我們放置了兩個連結按鈕, 按新增鈕時呼叫 accordion 的 add 方法加入新選單, 按下刪除鈕時先呼叫 accordion 的 getSelected 方法取得被選擇的選單 Panel 物件, 再呼叫 getPanelIndex 取得其索引, 最後傳給 remove 方法刪除之. 注意, 因為新增選單會讓長度增長, 所以 accordion 不設 height 屬性, 讓選單自動調整高度.

關於連結按鈕請參考 :

# jQuery EasyUI 測試 : LinkButton 連結按鈕

下面範例 12 要測試 select 與 unselect 這兩個方法, 我們修改上面範例 11, 把兩個連結按鈕改為全部展開與全部縮合, 最重要的是, 將 accordion 的 multiple 屬性設為 true, 允許開啟多個選單, 當按下全部展開鈕時, 所有選單都會開啟, 按下全部縮合鈕時則全部關閉 :

測試範例 12 : http://tony1966.xyz/test/easyuitest/easyui-accordion-12.htm [看原始碼]

  <a href="#" class="easyui-linkbutton" id="select_all">全部展開</a>
  <a href="#" class="easyui-linkbutton" id="unselect_all">全部縮合</a><br><br>
  <div id="acc1">
    <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(){
      $("#acc1").accordion({
        width:300,
        multiple:true
        });
      $("#select_all").bind("click",function(){
        var p=$("#acc1").accordion("panels");
        for (var i=0; i<p.length; i++) {
          var id=$("#acc1").accordion("getPanelIndex",p[i]);
          $("#acc1").accordion("select",id)
          }
        });
      $("#unselect_all").bind("click",function(){
        var p=$("#acc1").accordion("panels");
        for (var i=0; i<p.length; i++) {
          var id=$("#acc1").accordion("getPanelIndex",p[i]);
          $("#acc1").accordion("unselect",id)
          }
        });      
      });
  </script>

此例中先呼叫 accordion 的 panel 方法, 它會傳回全部選單的 Panel 物件陣列, 然後逐一拜訪這些 Panel 物件, 呼叫 getPanelIndex 方法取得其所以索引, 再呼叫 select 或 unselect 方法來展開或縮合該選單.

OK, 摺疊選單測試完畢.