jQuery UI 學習筆記 (十) : 下拉式選單 (Selectmenu)

選單 selectmenu 就是加上主題布景的下拉式選單, 其實在測試主題布景切換時就已經用過了, 參考 :

# jQuery UI 學習筆記 (一) : 主題布景 (Themes)

本篇是針對其選項, 方法, 與事件做較詳細之測試.

Selectmenu 的 API 與教學文件參考 :

# https://jqueryui.com/selectmenu/
# http://api.jqueryui.com/selectmenu/

本篇測試參考了如下書籍 :

1. jQuery UI 使用者介面設計 (歐萊里, Studio Tib. 譯)
2. jQuery UI 與 Plugin 開發實戰 (悅知文化, 吳哲穎譯)
3. jQuery 全能權威指南 (上奇, 張亞飛)

Selectmenu 基本上就是 select/option 元素, 以選擇器取得 jQuery 物件後, 呼叫 selectmenu() 方法即可, 其 jQuery 的事件要用 on() 綁定 selectmenuchange 事件, 例如 :


測試 1 : Selectmenu 測試 : 預設選單 [看原始碼]

HTML 部分 :

  <select id="language">

    <option value="">最擅長的程式語言</option>

    <option value="C">C</option>

    <option value="R">R</option>

    <option value="Java">Java</option>

    <option value="Python">Python</option>

    <option value="Javascript">Javascript</option>

  </select>

jQuery 部分 : 

      $("#language").selectmenu();

      $('#language').on('selectmenuchange', function() {

        var language=$(this).val();

        alert("您擅長的程式語言是 : " + language);

        });

此例呼叫 selectmenu() 並未傳入選項物件, 因此預設的選單寬度似乎有點大, 這可用 width 選項加以設定.

常用選項如下 :

常用 option	說明
disabled	不可用狀態 (true/false, 預設 false)
width	指定選單寬度 (單位 px), 預設 false
icons	指定選單上的按鈕 (字串, 預設 "ui-icon-triangle-1-s")

常用方法如下 :

常用 method	說明
option	取得或設定選項之值
disable	禁能 (等於 disabled 屬性=True)
enable	致能 (等於 disabled 屬性=False)
refresh	重新渲染元件
open	開啟 (拉下) 選單
close	關閉 (縮合) 選單

常用事件如下 :

常用 event	說明
create	建立物件時觸發
change	選擇之項目改變時觸發
select	項目被選擇時觸發
focus	項目取得焦點時觸發
open	選單開啟 (拉下) 時觸發
close	選單關閉 (縮合) 時觸發

下列範例綜合測試了 width, icons, disabled 等屬性, 以及 option, disable, enable, open, close 等方法 :


Selectmenu 測試 2 : 選項與方法綜合測試 [看原始碼]

HTML 部分 :

  <select id="language">
    <option value="">最擅長的程式語言</option>
    <option value="C">C</option>
    <option value="R">R</option>
    <option value="Java">Java</option>
    <option value="Python">Python</option>
    <option value="Javascript">Javascript</option>
  </select>
  <button id="open-close">Open</button>
  <button id="enable-disable">Enable</button>
  <p id="output"></p>

jQuery 部分 :

      var config={
        width: 180,
        disabled: true,
        icons: {button: "ui-icon-circle-triangle-s"}
        };
      $("#language").selectmenu(config);
      $('#language').on('selectmenuchange', function() {
        var language=$(this).val();
        $("#output").html("最擅長的程式語言是 : " + language);
        });
      $("#open-close").button();
      $("#open-close").on("click", function() {
        var str=$("#open-close").html();
        if (str=="Open") {
          $("#language").selectmenu("open");
          $("#open-close").html("Close");
          }
        else {
          $("#language").selectmenu("close");
          $("#open-close").html("Open");
          }
        });
      $("#enable-disable").button();
      $("#enable-disable").on("click", function() {
        var str=$("#enable-disable").html();
        if (str=="Enable") {
          $("#language").selectmenu("option", "disabled", false);
          //$("#language").selectmenu("enable");  //另一個做法
          $("#enable-disable").html("Disable");
          }
        else {
          $("#language").selectmenu("disable");
          $("#enable-disable").html("Enable");
          }
        });

此例設置了 open-close 與 enable-disable 兩個按鈕, 分別控制 selectmenu 選單的 "開啟/關閉" 與 "可用/不可用" 狀態切換. 這兩個按鈕透過其 label 來判斷選單目前之狀態而反覆切換. 初始化時選單是不可用的 (disabled: true), 因此 enable-disable 按鈕上的 label 預設是 Enable; 同理, 選單一般初始為關閉狀態, 因此 open-close 按鈕上的 label 預設是 Open.

其次, 由測試 1 可知, selectmenu 選單上預設是一個向下的小三角形圖案, 此例用 icons 選項將其設定為外面有圓圈的小三角形圖案 "ui-icon-circle-triangle-s", 還有更多 icon 可選, 參考 :

# http://api.jqueryui.com/theming/icons/

另外利用 width 選項將選單寬度做適當調整, 視覺效果較佳.

下列範例則是測試事件 :

Selectmenu 測試 3 : 六個事件測試 [看原始碼]

HTML 部分 :

  <table style="border-width:0px;">
    <tr>
      <td style="vertical-align: top;">
        <select id="language">
          <option value="">最擅長的程式語言</option>
          <option value="C">C</option>
          <option value="R">R</option>
          <option value="Java">Java</option>
          <option value="Python">Python</option>
          <option value="Javascript">Javascript</option>
        </select>
      </td>
      <td>
        <textarea id="output"></textarea>
      </td>
    </tr>
  </table>

jQuery 部分 :

      var config={
        create: function(e, ui) {
          $("#language").selectmenu("option", "width", 180);
          $("#language").selectmenu("open");
          $("#output").html("觸發 create 事件 : " + $(this).val());
          },
        change: function(e, ui) {
          var html="觸發 change 事件 : " +  $(this).val() + "\n" +
                   $("#output").html();
          $("#output").html(html);
          },
        select: function(e, ui) {
          var html="觸發 select 事件 : " +  $(this).val() + "\n" +
                   $("#output").html();
          $("#output").html(html);
          },
        focus: function(e, ui) {
          var html="觸發 focus 事件 : " +  $(this).val() + "\n" +
                   $("#output").html();
          $("#output").html(html);
          },
        open: function(e, ui) {
          var html="觸發 open 事件 : " +  $(this).val() + "\n" +
                   $("#output").html();
          $("#output").html(html);
          },
        close: function(e, ui) {
          var html="觸發 close 事件 : " +  $(this).val() + "\n" +
                   $("#output").html();
          $("#output").html(html);
          }
        };
      $("#language").selectmenu(config);

此例將顯示輸出的元素改為 textarea, 且為了版面好看將 selectmenu 與 textarea 分別放在 1*2 表格的 cell 中. 在設定物件 config 中為六種事件綁定了處理函數, 其中 create 會在 selectmenu 物件建立時觸發, 於此事件中利用 option 方法設定了選單的寬度 width, 然後呼叫 open 方法開啟選單, 所以網頁初始化時選單是打開的.

每一個事件被觸發時, 會先取得 textarea 的內容, 然後將此事件的資訊冠在其前, 再更新 textarea 內容, 因此最新的事件總是在前面. 注意, 取得 selectmenu 的被選取值要用 $(this).val(), 不是用 ui.value.