jQuery UI 學習筆記 (六) : 滑桿 (Slider)

滑桿 Slider 的功能與 Spinner 類似, 也是用來處理數字的工具, 差別只是 Spinner 用按鈕增減數值, 而 Slider 卻是用調整滑桿而已. 在 Google Map 中也可以將預設調整比例的 Spinner 改為 Slider :

Slider 的文件與範例參考 :

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

與 Spinner 使用 input 文字欄位不同的是, Slider 使用 div 元素當作載體 :

<div id="slider1"></div> 

然後透過 id 取的 jQuery 物件後, 呼叫其 slider() 方法即可. 例如 :


測試 1 : Slider 測試 : 預設滑桿 [看原始碼]

HTML 部分 :

<div id="slider"></div> 

jQuery 部分 :

$("#slider1").slider();   

預設方向是水平佔據整個版面的, 可用 CSS 指定 div 元素長度, 或傳入設定選項組成之物件來初始化 Slider.

常用選項如下表 :

常用 options	說明
min	最小值
max	最大值
step	步階數 (min 到 max 之間平均分成 step 段)
orientation	方向 : "horizontal" (預設), "vertical"
disabled	不可用 (true/false, 預設 false)
range	是否為可調整範圍 (true/false, 預設 false), 亦可為 "min" 或 "max"
value	設定滑桿初始值, 雙柄滑桿則為第一滑桿初始值
values	設定雙柄滑桿初始值 (雙元素之一維陣列)

常用方法如下表 :

常用方法	說明
option	取得或設定選項
enable	致能 (可用)
disable	禁能 (不可用)
value	取得或設定單柄滑桿之值
values	取得或設定雙柄滑桿之值 (一維 2 元素陣列)

常用事件如下表 :

常用事件	說明
create	滑桿元件建立時觸發
slide	滑桿滑動時觸發
start	滑桿開始滑動時觸發
stop	滑桿停止滑動時觸發
change	滑桿滑動改變值或呼叫 value/valuse 改變時觸發

每個事件都會傳回 event 與 ui 物件 (即滑桿物件本身), 除了用 value 與 values 方法外, 也可以利用 ui.value 取得滑桿之現值.

下面測試 2 使用選項物件對滑桿進行初始化, 並利用 slide 事件透過 value 方法取得即時之值顯示於 span 元素上 :


測試 2 : Slider 測試 : 使用 ui.value 取值 [看原始碼]

HTML 部分 :

  <div id="hslider" style="width:300px;"></div>
  <p id="hslider_value"></p>

jQuery 部分 :

      $("#hslider").slider({
        min: 0,
        max: 100,
        slide: function(e, ui) {
          $("#hslider_value").html(ui.value);
          }
        });

此例中使用 p 元素來即時顯示滑桿目前的值, min 與 max 設定了滑桿的最小值與最大值, 而 slide 事件則定義一個回呼函數來處理, 當滑桿移動時透過 ui.value 取得目前值, 並設定為 p 元素的內容.

也可以用 $("#hslider").slider("value") 來取得滑桿目前值, 例如 :


測試 3 : Slider 測試 : 使用 value 方法取值 [看原始碼]

HTML 部分 :

  <div id="hslider" style="width:300px;"></div>
  <p id="hslider_value"></p>

jQuery 部分 :

      $("#hslider").slider({
        min: 0,
        max: 100,
        slide: function(e, ui) {
          var val=$("#hslider").slider("value");   //使用 value 方法取值
          $("#hslider_value").html(val);
          }
        });

此處使用了 value 方法取值, 注意, 實際移動滑桿發現, 滑桿滑到底或到頂時, 用呼叫 value 方法取得的數據似乎沒辦法到 min 或 max 之值, 而是有些微差距, why? 所以最好還是用測試 2 的 ui.value 為宜.

上面範例中需要多用一個元素 (p, span, input 或 div 均可) 來顯示值, 可否直接將現值打在滑桿上呢? 可以的, 這可以利用 jQuery 物件的 find() 方法搜尋樣式等級 (class) 為 "ui-slider-handle" 的元件 (此即滑桿之柄), 再呼叫 html() 將 ui.value 設定給它即可, 參考 :

# Jquery UI Multiple Slider Display Custom Handle value with Input Text Box

滑桿的柄的樣式等級 (class) 可在 Chrome 瀏覽器中按 F12, 打開 "Element" 頁籤, 在 body 裡面找出滑桿的載體 div 元素之最後渲染結果即可看到 :

其實用 "ui-state-focus" 或 "ui-status-hover" 樣式也是可以的, 它們都代表了目前獲得焦點的滑桿柄元件, 例如 :


測試 4 : Slider 測試 : 將現值打在滑桿柄上 [看原始碼]

HTML 部分 :

  <div id="hslider" style="width:300px;"></div>
  <p id="hslider_value"></p>

jQuery 部分 :

      $("#hslider").slider({
        min: 0,
        max: 100,
        slide: function(e, ui) {
          $("#hslider_value").html(ui.value);
          $(this).find(".ui-slider-handle").html(ui.value);
          }
        });

此例我們保留了 p 元素的顯示功能以便與滑桿柄上的數字相印證, 可見兩個是同步變化的.

不過, 將數值直接打在滑桿的柄上有個缺點, 若數值大於兩位數就會超出滑桿柄的外框而破壞視覺效果, 例如將此例中的滑桿拉到最右邊, 尾數的 0 就超出外框了. 這可以利用 Slider 的 create 事件來調整, 在 Slider 一建立時就用 CSS 樣式將滑桿柄的寬度放大即可, 例如 :


測試 5 : Slider 測試 : step 與 value 選項與調整滑桿柄樣式 [看原始碼]

HTML 部分 :

  <div id="hslider" style="width:300px;"></div>
  <p id="hslider_value"></p>

jQuery 部分 :

      $("#hslider").slider({
        min: 100,
        max: 1000,
        step: 100,
        value: 500,
        create: function(e, ui) {
          var style={"width":"30px","text-align":"center"};
          $(this).find(".ui-slider-handle").css(style);
          css();
          },
        slide: function(e, ui) {
          $("#hslider_value").html(ui.value);
          $(this).find(".ui-slider-handle").html(ui.value);
          }
        });

此例於 create 事件的回呼函數中先定義一個寬度 30px 與置中對齊的樣式物件, 然後用 find 找到滑桿柄後呼叫 css() 設定為此樣式, 如此滑桿柄之寬度就被設為較大之 30px 且文字置中. 此處也同時測試了 step 與 value 選項, value 用來設定滑桿之初始值, 而 step 是滑桿移動時的數值步階, 此處設為 100 表示每次移動一格跳 100.

選項 range 與 values 用來設定雙柄滑桿, range 預設為 false (單柄滑桿), 若設為 true 則 Slider 會出現兩個柄 (handle), 滑桿之值不是一個單值, 而是一個由上值與下值表示的區間範圍, 可用 values 選項以雙元素的一維陣列 [a, b] 初始化, 例如 :


測試 6 : Slider 測試 : 雙柄滑桿之 range 與 values 選項方法 [看原始碼]

HTML 部分 :

  <div id="hslider" style="width:200px;"></div>
  <p>
    L: <span id="hslider_value_L"></span>
    H: <span id="hslider_value_H"></span>
  </p>

jQuery 部分 :

      $("#hslider").slider({
        min: 0,
        max: 100,
        range: true,
        values: [20, 80],
        create: function(e, ui) {
          var style={"width":"20px","text-align":"center"};
          $(this).find(".ui-slider-handle").css(style);
          },
        slide: function(e, ui) {
          var L=$("#hslider").slider("values", 0);
          var H=$("#hslider").slider("values", 1);
          $("#hslider_value_L").html(L);
          $("#hslider_value_H").html(H);
          $(this).find(".ui-state-focus").html(ui.value);
          }
        });

此例用 range=true 將滑桿變成雙柄, 並以陣列 [20, 80] 設定 values 選項初始化滑桿, 當滑桿的高低柄移動時透過呼叫 values 方法並指定索引 0 或 1 以取得高低柄之現值 H/L, 然後分別設定給兩個 span 元素來顯示雙柄滑桿的高低值. 如果呼叫 values 方法時沒有傳入第二參數 (索引 0/1), 則其傳回值將是一個陣列, 因此上面的 slide 事件也可以這麼寫 :

        slide: function(e, ui) {
          var values=$("#hslider").slider("values");
          $("#hslider_value_L").html(values[0]);
          $("#hslider_value_H").html(values[1]);
          $(this).find(".ui-state-focus").html(ui.value);
          }

例如 :


測試 6-1 : Slider 測試 : 雙柄滑桿之 range 與 values 選項方法 [看原始碼]

方法 values 也可用來設定雙柄滑桿之值, 可傳入第二與第三參數分別代表低值與高值 :

$("#hslider").slider("values", 15, 78);   //15=低值, 78=高值

也可以傳入陣列 :

$("#hslider").slider("values", [15, 78]);  //15=低值, 78=高值

不過如上圖所示, 使用呼叫 values 方法所取得之值似乎與 ui.value 有些微差距 (bug?), 應該直接使用 ui 物件的值才對, 事實上 ui 物件有一個 values 屬性, 其值就是雙柄滑桿的高低值, 可用 ui.values[0] 取得低值; 用 ui.values[1] 取得高值, 這樣便無差異 1 現象了, 參考 :

# jQuery UI : Slider Events

例如 :


測試 7 : Slider 測試 : 用 ui.values 取得雙柄滑桿之值 [看原始碼]

HTML 部分 :

  <div id="hslider" style="width:200px;"></div>
  <p>
    L: <span id="hslider_value_L"></span>
    H: <span id="hslider_value_H"></span>
  </p>

jQuery 部分 :

      $("#hslider").slider({
        min: 0,
        max: 100,
        range: true,
        values: [20, 80],
        create: function(e, ui) {
          var style={"width":"20px","text-align":"center"};
          $(this).find(".ui-slider-handle").css(style);
          },
        slide: function(e, ui) {
          $("#hslider_value_L").html(ui.values[0]);
          $("#hslider_value_H").html(ui.values[1]);
          $(this).find(".ui-state-focus").html(ui.value);
          }
        });

選項 orientation 用來設定滑桿的走向, 可用選項值為水平 "horizontal" (預設) 與垂直 "vertical", 例如 :


測試 8 : Slider 測試 : orientation 選項 [看原始碼]

HTML 部分 :

  <div id="hslider" style="width:200px;"></div><br>
  <div id="vslider" style="height:200px;"></div>

jQuery 部分 :

      $("#hslider").slider({
        min: 0,
        max: 100,
        slide: function(e, ui) {
          $(this).find(".ui-slider-handle").html(ui.value);
          }
        });
      $("#vslider").slider({
        min: 0,
        max: 100,
        orientation: "vertical",
        slide: function(e, ui) {
          $(this).find(".ui-slider-handle").html(ui.value);
          }
        });

下面範例測試 disabled 選項與 option, disable 方法 :


測試 9 : Slider 測試 : option/disable 方法與 disabled 選項 [看原始碼]

HTML 部分 :

  <div id="hslider" style="width:200px;"></div><br>
  <button id="toggle" class="ui-button ui-widget ui-corner-all">Toggle</button>

jQuery 部分 :

      $("#hslider").slider({
        min: 0,
        max: 100,
        disabled: true
        });
      $("#toggle").click(function(e) {
        var isDisabled=$("#hslider").slider("option", "disabled");
        if (isDisabled) { //現在是不可用狀態
          $("#hslider").slider("option", "disabled", false);
          }
        else {  //現在是可用狀態
          $("#hslider").slider("disable");
          }
        });

此例用 disabled=true 將滑桿初始化為不可用, 按下 Toggle 鈕可以切換滑桿的可用/不可用狀態. 呼叫 option 方法若傳入第三參數 true/false 為 setter, 否則為 getter. 將滑桿設為可用除了用 option 方法外, 可直接呼叫 enable 方法 :

$("#hslider").slider("enable");

最後用 Slider 取代 Spinner 來實作一個調色盤, 參考 "jQuery UI 學習筆記 (五) : 微調器 (Spinner)" 的測試 8.


測試 10 : Slider 測試 : 調色盤 [看原始碼]

HTML 部分 :

  R <div id="red" style="width:200px;"></div><br>
  G <div id="green" style="width:200px;"></div><br>
  B <div id="blue" style="width:200px;"></div><br>
  <div id="canvas" style="width:200px;height:100px;border-style:solid;">
  </div>

jQuery 部分 :

      var create=function(e, ui) {
        var style={"width":"25px","text-align":"center"};
        $(this).find(".ui-slider-handle").css(style);
        };
      var slide=function(e, ui) {
        $(this).find(".ui-state-focus").html(ui.value);
        var r=$("#red").slider("value");
        var g=$("#green").slider("value");
        var b=$("#blue").slider("value");
        var bgcolor="rgb(" + r + "," + g + "," + b + ")";
        $("#canvas").css("background-color", bgcolor);
        };
      var config={min: 0, max: 255, create: create, slide: slide};
      $("#red").slider(config);
      $("#green").slider(config);
      $("#blue").slider(config);

此例設置了三個獨立的 Slider, 滑動任何一個都會呼叫 slide() 函數以 css() 去更新畫布背景顏色的 RGB 值. 滑桿的 slide 事件也可以用 jQuery 的 on() 去綁定, 例如上面的範例 10 可以改為 :


測試 11 : Slider 測試 : 調色盤 [看原始碼]

HTML 部分 :

  R <div id="red" style="width:200px;"></div><br>
  G <div id="green" style="width:200px;"></div><br>
  B <div id="blue" style="width:200px;"></div><br>
  <div id="canvas" style="width:200px;height:100px;border-style:solid;">
  </div>

jQuery 部分 :

      var create=function(e, ui) {
        var style={"width":"25px","text-align":"center"};
        $(this).find(".ui-slider-handle").css(style);
        };
      var slide=function(e, ui) {
        $(this).find(".ui-state-focus").html(ui.value);
        var r=$("#red").slider("value");
        var g=$("#green").slider("value");
        var b=$("#blue").slider("value");
        var bgcolor="rgb(" + r + "," + g + "," + b + ")";
        $("#canvas").css("background-color", bgcolor);
        };
      var config={min: 0, max: 255, create: create};
      $("#red").slider(config);
      $("#green").slider(config);
      $("#blue").slider(config);
      $("#red").on("slide", slide);
      $("#green").on("slide", slide);
      $("#blue").on("slide", slide);

此例結果與上面範例 10 相同. 注意, 因 slide 事件本身就是 jQuery 事件可以這樣綁定, 但 create 不是, 所以 create 還是留在 config 物件內設定, 不能用 on() 綁定.