首页 > 代码库 > jQuery UI Slider(滑块)

jQuery UI Slider(滑块)

2024-10-17 06:37:38   212人阅读

技术分享 
 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="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
 7   <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
 8   <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 9   <link rel="stylesheet" href="http://www.mamicode.com/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>
View Code

官网

其余的就不写了，菜鸟写的很详细

 

jQuery UI Slider(滑块)


联系
我们