减小字体
增大字体- ·上一篇文章：jQuery UI 实例 - 进度条（Progressbar）
- ·下一篇文章：jQuery UI 实例 - 旋转器（Spinner）
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS02 → 文章内容
jQuery UI 实例 - 滑块（Slider）
jQuery UI 实例 - 滑块（Slider）拖动手柄来选择一个数值。如需了解更多有关 slider 部件的细节，请查看 API 文档 滑块部件（Slider Widget）。默认功能基本的滑块是水平的，有一个单一的手柄，可以用鼠标或箭头键进行移动。<!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
//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
jQuery UI 实例 - 滑块（Slider）
