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

所屬類別

小部件（Widgets）

用法

描述：拖動(dòng)手柄來選擇一個(gè)數(shù)值。

版本新增：1.5

jQuery UI 滑塊（Slider）插件允許通過滑塊進(jìn)行選擇。有各種不同的選項(xiàng)，比如多個(gè)手柄和范圍。手柄可通過鼠標(biāo)或箭頭按鍵進(jìn)行移動(dòng)。

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

主題化

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

  • ui-slider：滑塊控件的軌道。該元素會(huì)根據(jù)滑塊的 orientation 另外帶有一個(gè) ui-slider-horizontal 或 ui-slider-vertical class。
    • ui-slider-handle：滑塊手柄。
    • ui-slider-range：當(dāng)設(shè)置 range 選項(xiàng)時(shí)使用的已選范圍。如果 range 選項(xiàng)設(shè)置為 "min" 或 "max"，則該元素會(huì)分別另外帶有一個(gè) ui-slider-range-min 或 ui-slider-range-max class。

依賴

附加說明

  • 該部件要求一些功能性的 CSS，否則將無法工作。如果您創(chuàng)建了一個(gè)自定義的主題，請(qǐng)使用小部件指定的 CSS 文件作為起點(diǎn)。

實(shí)例

一個(gè)簡(jiǎn)單的 jQuery UI 滑塊（Slider）。

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

查看演示