1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="UTF-8" /> |
|
5 <title>jQuery UI Slider - Multiple sliders</title> |
|
6 <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
|
7 <script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
|
8 <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> |
|
9 <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> |
|
10 <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> |
|
11 <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> |
|
12 <link type="text/css" href="../demos.css" rel="stylesheet" /> |
|
13 <style type="text/css"> |
|
14 #demo-frame > div.demo { padding: 10px !important; } |
|
15 #eq span { |
|
16 height:120px; float:left; margin:15px |
|
17 } |
|
18 </style> |
|
19 <script type="text/javascript"> |
|
20 $(function() { |
|
21 // setup master volume |
|
22 $("#master").slider({ |
|
23 value: 60, |
|
24 orientation: "horizontal", |
|
25 range: "min", |
|
26 animate: true |
|
27 }); |
|
28 // setup graphic EQ |
|
29 $("#eq > span").each(function() { |
|
30 // read initial values from markup and remove that |
|
31 var value = parseInt($(this).text()); |
|
32 $(this).empty().slider({ |
|
33 value: value, |
|
34 range: "min", |
|
35 animate: true, |
|
36 orientation: "vertical" |
|
37 }); |
|
38 }); |
|
39 }); |
|
40 </script> |
|
41 </head> |
|
42 <body class="ui-widget-content" style="border:0;"> |
|
43 |
|
44 <div class="demo"> |
|
45 |
|
46 <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> |
|
47 <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> |
|
48 Master volume |
|
49 </p> |
|
50 |
|
51 <div id="master" style="width:260px; margin:15px;"></div> |
|
52 |
|
53 <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"> |
|
54 <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> |
|
55 Graphic EQ |
|
56 </p> |
|
57 |
|
58 <div id="eq"> |
|
59 <span>88</span> |
|
60 <span>77</span> |
|
61 <span>55</span> |
|
62 <span>33</span> |
|
63 <span>40</span> |
|
64 <span>45</span> |
|
65 <span>70</span> |
|
66 </div> |
|
67 |
|
68 </div><!-- End demo --> |
|
69 |
|
70 <div class="demo-description" style="clear:left;"> |
|
71 |
|
72 <p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> |
|
73 |
|
74 </div><!-- End demo-description --> |
|
75 |
|
76 </body> |
|
77 </html> |
|