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