Latest web development tutorials

jQuery UI API – 滑塊部件（Slider Widget）

所屬類別

小部件（Widgets）

用法

描述：拖動手柄來選擇一個數值。

版本新增： 1.5

jQuery UI 滑塊（Slider）插件允許通過滑塊進行選擇。 有各種不同的選項，比如多個手柄和範圍。 手柄可通過鼠標或箭頭按鍵進行移動。

滑塊部件（Slider Widget）會在初始化時創建帶有class ui-slider-handle的手柄元素。 您可以通過在初始化之前創建並追加元素，同時向元素添加ui-slider-handle class來指定自定義的手柄元素。 它只會創建匹配value / values長度所需的數量的手柄。 例如，如果您指定values: [ 1, 5, 18 ] ，且創建一個自定義手柄，插件將創建其他兩個。

主題化

滑塊部件（Slider Widget）使用jQuery UI CSS框架來定義它的外觀和感觀的樣式。 如果需要使用滑塊指定的樣式，則可以使用下面的CSS class 名稱：

  • ui-slider ：滑塊控件的軌道。 該元素會根據滑塊的orientation另外帶有一個ui-slider-horizontal或ui-slider-vertical class。
    • ui-slider-handle ：滑塊手柄。
    • ui-slider-range ：當設置range選項時使用的已選範圍。 如果range選項設置為"min"或"max" ，則該元素會分別另外帶有一個ui-slider-range-min或ui-slider-range-max class。

依賴

附加說明

  • 該部件要求一些功能性的CSS，否則將無法工作。 如果您創建了一個自定義的主題，請使用小部件指定的CSS 文件作為起點。

實例

一個簡單的jQuery UI 滑塊（Slider）。 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>滑塊部件（Slider Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>#slider { margin: 10px; } </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="slider"></div>
 
<script>
$( "#slider" ).slider();
</script>
 
</body>
</html>