jQuery UI Slider(滑块)
Posted Cein
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery UI Slider(滑块)相关的知识，希望对你有一定的参考价值。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery UI 滑块（Slider） - 颜色选择器</title> 6 <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> 7 <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> 8 <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 9 <link rel="stylesheet" href="jqueryui/style.css"> 10 <style> 11 #red, #green, #blue { 12 float: left; 13 clear: left; 14 width: 300px; 15 margin: 15px; 16 } 17 #swatch { 18 width: 120px; 19 height: 100px; 20 margin-top: 18px; 21 margin-left: 350px; 22 background-image: none; 23 } 24 #red .ui-slider-range { background: #ef2929; } 25 #red .ui-slider-handle { border-color: #ef2929; } 26 #green .ui-slider-range { background: #8ae234; } 27 #green .ui-slider-handle { border-color: #8ae234; } 28 #blue .ui-slider-range { background: #729fcf; } 29 #blue .ui-slider-handle { border-color: #729fcf; } 30 </style> 31 <script> 32 function hexFromRGB(r, g, b) { 33 var hex = [ 34 r.toString( 16 ), 35 g.toString( 16 ), 36 b.toString( 16 ) 37 ]; 38 $.each( hex, function( nr, val ) { 39 if ( val.length === 1 ) { 40 hex[ nr ] = "0" + val; 41 } 42 }); 43 return hex.join( "" ).toUpperCase(); 44 } 45 function refreshSwatch() { 46 var red = $( "#red" ).slider( "value" ), 47 green = $( "#green" ).slider( "value" ), 48 blue = $( "#blue" ).slider( "value" ), 49 hex = hexFromRGB( red, green, blue ); 50 $( "#swatch" ).css( "background-color", "#" + hex ); 51 } 52 $(function() { 53 $( "#red, #green, #blue" ).slider({ 54 orientation: "horizontal", 55 range: "min", 56 max: 255, 57 value: 127, 58 slide: refreshSwatch, 59 change: refreshSwatch 60 }); 61 $( "#red" ).slider( "value", 255 ); 62 $( "#green" ).slider( "value", 140 ); 63 $( "#blue" ).slider( "value", 60 ); 64 }); 65 </script> 66 </head> 67 <body class="ui-widget-content" style="border:0;"> 68 69 <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> 70 <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> 71 简单的颜色选择器 72 </p> 73 74 <div id="red"></div> 75 <div id="green"></div> 76 <div id="blue"></div> 77 78 <div id="swatch" class="ui-widget-content ui-corner-all"></div> 79 80 81 </body> 82 </html>
其余的就不写了，菜鸟写的很详细
以上是关于jQuery UI Slider(滑块)的主要内容，如果未能解决你的问题，请参考以下文章
jQuery-ui slider - 如何阻止两个滑块相互控制