jQuery UI 實例 - 滑塊（Slider） · W3School jQuery UI 教程

# jQuery UI 實例 - 滑塊（Slider）拖動手柄來選擇一個數值。如需了解更多有關 slider 部件的細節，請查看 API 文檔 [滑塊部件（Slider Widget）](api-slider.html)。 ## 默認功能基本的滑塊是水平的，有一個單一的手柄，可以用鼠標或箭頭鍵進行移動。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 默認功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider" ).slider(); }); </script> </head> <body> <div id="slider"></div> </body> </html> ``` ## 顏色選擇器組合了三個滑塊，來創建一個簡單的 RGB 顏色選擇器。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 顏色選擇器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 120px; height: 100px; margin-top: 18px; margin-left: 350px; background-image: none; } #red .ui-slider-range { background: #ef2929; } #red .ui-slider-handle { border-color: #ef2929; } #green .ui-slider-range { background: #8ae234; } #green .ui-slider-handle { border-color: #8ae234; } #blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; } </style> <script> function hexFromRGB(r, g, b) { var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase(); } function refreshSwatch() { var red = $( "#red" ).slider( "value" ), green = $( "#green" ).slider( "value" ), blue = $( "#blue" ).slider( "value" ), hex = hexFromRGB( red, green, blue ); $( "#swatch" ).css( "background-color", "#" + hex ); } $(function() { $( "#red, #green, #blue" ).slider({ orientation: "horizontal", range: "min", max: 255, value: 127, slide: refreshSwatch, change: refreshSwatch }); $( "#red" ).slider( "value", 255 ); $( "#green" ).slider( "value", 140 ); $( "#blue" ).slider( "value", 60 ); }); </script> </head> <body class="ui-widget-content" style="border:0;"> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> 簡單的顏色選擇器 </p> <div id="red"></div> <div id="green"></div> <div id="blue"></div> <div id="swatch" class="ui-widget-content ui-corner-all"></div> </body> </html> ``` ## 多個滑塊組合水平的和垂直的滑塊，每個都帶有各自的選項，來創建一個音樂播放器的 UI。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 多個滑塊</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #eq span { height:120px; float:left; margin:15px } </style> <script> $(function() { // 設置主音量 $( "#master" ).slider({ value: 60, orientation: "horizontal", range: "min", animate: true }); // 設置圖形均衡器 $( "#eq > span" ).each(function() { // 從標記讀取初始值并刪除 var value = parseInt( $( this ).text(), 10 ); $( this ).empty().slider({ value: value, range: "min", animate: true, orientation: "vertical" }); }); }); </script> </head> <body> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> 主音量 </p> <div id="master" style="width:260px; margin:15px;"></div> <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"> <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> 圖形均衡器 </p> <div id="eq"> <span>88</span> <span>77</span> <span>55</span> <span>33</span> <span>40</span> <span>45</span> <span>70</span> </div> </body> </html> ``` ## 范圍滑塊設置 `range` 選項為 true，來獲取帶有兩個拖拽手柄的值的范圍。手柄之間的控件用不同的背景顏色填充來表示該區間的值是可選擇的。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 范圍滑塊</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script> </head> <body> <p> <label for="amount">價格范圍：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </body> </html> ``` ## 帶有固定最大值的范圍固定范圍滑塊的最大值，用戶只能選擇最小值。設置 `range` 選項為 "max"。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 帶有固定最大值的范圍</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-range-max" ).slider({ range: "max", min: 1, max: 10, value: 2, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); }); </script> </head> <body> <p> <label for="amount">最小的房間數量：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range-max"></div> </body> </html> ``` ## 帶有固定最小值的范圍固定范圍滑塊的最小值，用戶只能選擇最大值。設置 `range` 選項為 "min"。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 帶有固定最小值的范圍</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 700, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } }); $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); }); </script> </head> <body> <p> <label for="amount">最大價格：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range-min"></div> </body> </html> ``` ## 綁定到 select 的滑塊如何綁定一個滑塊到一個已有的 select 元素。選擇保持可見以便顯示變化。當選擇改變時，同時更新滑塊。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 綁定到 select 的滑塊</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { var select = $( "#minbeds" ); var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({ min: 1, max: 6, range: "min", value: select[ 0 ].selectedIndex + 1, slide: function( event, ui ) { select[ 0 ].selectedIndex = ui.value - 1; } }); $( "#minbeds" ).change(function() { slider.slider( "value", this.selectedIndex + 1 ); }); }); </script> </head> <body> <form id="reservation"> <label for="minbeds">最小的床位數</label> <select name="minbeds" id="minbeds"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> </form> </body> </html> ``` ## 滑塊滾動條使用滑塊來操作頁面上內容的定位。本實例中，它是一個能獲取值的滾動條。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 滑塊滾動條</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .scroll-pane { overflow: auto; width: 99%; float:left; } .scroll-content { width: 2440px; float: left; } .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } </style> <script> $(function() { //滾動面板部分 var scrollPane = $( ".scroll-pane" ), scrollContent = $( ".scroll-content" ); //創建滑塊 var scrollbar = $( ".scroll-bar" ).slider({ slide: function( event, ui ) { if ( scrollContent.width() > scrollPane.width() ) { scrollContent.css( "margin-left", Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) ) + "px" ); } else { scrollContent.css( "margin-left", 0 ); } } }); //追加要處理的圖標 var handleHelper = scrollbar.find( ".ui-slider-handle" ) .mousedown(function() { scrollbar.width( handleHelper.width() ); }) .mouseup(function() { scrollbar.width( "100%" ); }) .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); //由于滑塊手柄滾動，改變要隱藏的溢出部分 scrollPane.css( "overflow", "hidden" ); //根據要滾動距離按比例定義滾動條和手柄的尺寸 function sizeScrollbar() { var remainder = scrollContent.width() - scrollPane.width(); var proportion = remainder / scrollContent.width(); var handleSize = scrollPane.width() - ( proportion * scrollPane.width() ); scrollbar.find( ".ui-slider-handle" ).css({ width: handleSize, "margin-left": -handleSize / 2 }); handleHelper.width( "" ).width( scrollbar.width() - handleSize ); } //基于滾動內容位置，重置滑塊的值 function resetValue() { var remainder = scrollPane.width() - scrollContent.width(); var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : parseInt( scrollContent.css( "margin-left" ) ); var percentage = Math.round( leftVal / remainder * 100 ); scrollbar.slider( "value", percentage ); } //如果滑塊是 100%，且窗口變大，則顯示內容 function reflowContent() { var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 ); var gap = scrollPane.width() - showing; if ( gap > 0 ) { scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap ); } } //當縮放窗口時改變手柄的位置 $( window ).resize(function() { resetValue(); sizeScrollbar(); reflowContent(); }); //初始化滾動條大小 setTimeout( sizeScrollbar, 10 );//safari 超時 }); </script> </head> <body> <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> <div class="scroll-content"> <div class="scroll-content-item ui-widget-header">1</div> <div class="scroll-content-item ui-widget-header">2</div> <div class="scroll-content-item ui-widget-header">3</div> <div class="scroll-content-item ui-widget-header">4</div> <div class="scroll-content-item ui-widget-header">5</div> <div class="scroll-content-item ui-widget-header">6</div> <div class="scroll-content-item ui-widget-header">7</div> <div class="scroll-content-item ui-widget-header">8</div> <div class="scroll-content-item ui-widget-header">9</div> <div class="scroll-content-item ui-widget-header">10</div> <div class="scroll-content-item ui-widget-header">11</div> <div class="scroll-content-item ui-widget-header">12</div> <div class="scroll-content-item ui-widget-header">13</div> <div class="scroll-content-item ui-widget-header">14</div> <div class="scroll-content-item ui-widget-header">15</div> <div class="scroll-content-item ui-widget-header">16</div> <div class="scroll-content-item ui-widget-header">17</div> <div class="scroll-content-item ui-widget-header">18</div> <div class="scroll-content-item ui-widget-header">19</div> <div class="scroll-content-item ui-widget-header">20</div> </div> <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> <div class="scroll-bar"></div> </div> </div> </body> </html> ``` ## 對齊增量通過把 `step` 選項設置為一個整數來設置滑塊值的增量，通常是滑塊最大值的除數。默認增量是 1。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 對齊增量</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider" ).slider({ value:100, min: 0, max: 500, step: 50, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } }); $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) ); }); </script> </head> <body> <p> <label for="amount">捐款金額（$50 增量）：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider"></div> </body> </html> ``` ## 垂直的范圍滑塊改變范圍滑塊的方向為垂直的。通過 `.height()` 分配一個高度值，或通過 CSS 設置高度，同時設置 `orientation` 選項為 "vertical"。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 垂直的范圍滑塊</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-range" ).slider({ orientation: "vertical", range: true, values: [ 17, 67 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script> </head> <body> <p> <label for="amount">銷售目標（百萬）：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range" style="height:250px;"></div> </body> </html> ``` ## 垂直的滑塊改變滑塊的方向為垂直的。通過 `.height()` 分配一個高度值，或通過 CSS 設置高度，同時設置 `orientation` 選項為 "vertical"。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑塊（Slider） - 垂直的滑塊</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-vertical" ).slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 60, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) ); }); </script> </head> <body> <p> <label for="amount">體積：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-vertical" style="height:200px;"></div> </body> </html> ```