jquery / jquery-ui

Source
Commits
Network (189)
Graphs
Tree: cacb2ac

The official jQuery user interface library. — Read more

This URL has Read+Write access

refactored multiple-slider demo by setting a few defaults and reading values 
from markup, removing some inline styles

jzaefferer (author)

Sat Feb 28 04:24:42 -0800 2009

commit cacb2acee4c618fc9be1
tree 75752f678f5e5fc1aa22
parent 78bddbe8df4d15844b72

demos/slider/multiple-vertical.html

72 ••••

demos/slider/multiple-vertical.html

View file @ cacb2ac

@@ -9,47 +9,31 @@
   <link type="text/css" href="../demos.css" rel="stylesheet" />
   <style type="text/css">
     #demo-frame > div.demo { padding: 10px !important; }
+    #eq span {
+      height:120px; float:left; margin:15px
+    }
   </style>
   <script type="text/javascript">
   $(function() {
-    $("#slider0").slider({
+    // change defaults for range, animate and orientation
+    $.extend($.ui.slider.defaults, {
       range: "min",
-      value: 60
+      animate: true,
+      orientation: "vertical"
     });
-    $("#slider1").slider({
-      orientation: "vertical",
-      range: "min",
-      value: 88
-    });
-    $("#slider2").slider({
-      orientation: "vertical",
-      range: "min",
-      value: 77
-    });
-    $("#slider3").slider({
-      orientation: "vertical",
-      range: "min",
-      value: 55
-    });
-    $("#slider4").slider({
-      orientation: "vertical",
-      range: "min",
-      value: 33
-    });
-    $("#slider5").slider({
-      orientation: "vertical",
-      range: "min",
-      value: 40
+    // setup master volume
+    $("#master").slider({
+      value: 60,
+      orientation: "horizontal"
     });
-    $("#slider6").slider({
-      orientation: "vertical",
-      range: "min",
-      value: 45
-    });
-    $("#slider7").slider({
-      orientation: "vertical",
-      range: "min",
-      value: 70
+    // setup graphic EQ
+    $("#eq > span").each(function() {
+      // read initial values from markup and remove that
+      var value = parseInt($(this).text());
+      $(this).empty();
+      $(this).slider({
+        value: value
+      })
     });
   });
   </script>
@@ -63,20 +47,22 @@
 Master volume
 </p>
 
-<div id="slider0" style="width:260px; margin:15px;"></div>
+<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>
 Graphic EQ
 </p>
 
-<div id="slider1" style="height:120px; float:left; margin:15px"></div>
-<div id="slider2" style="height:120px; float:left; margin:15px"></div>
-<div id="slider3" style="height:120px; float:left; margin:15px"></div>
-<div id="slider4" style="height:120px; float:left; margin:15px"></div>
-<div id="slider5" style="height:120px; float:left; margin:15px"></div>
-<div id="slider6" style="height:120px; float:left; margin:15px"></div>
-<div id="slider7" style="height:120px; float:left; margin:15px"></div>
+<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>
 
 </div><!-- End demo -->
 

0 notes on commit `cacb2ac` Show line notes below

Please log in to comment.

...	...	@@ -9,47 +9,31 @@
9	9	<link type="text/css" href="../demos.css" rel="stylesheet" />
10	10	<style type="text/css">
11	11	#demo-frame > div.demo { padding: 10px !important; }
	12	+ #eq span {
	13	+ height:120px; float:left; margin:15px
	14	+ }
12	15	</style>
13	16	<script type="text/javascript">
14	17	$(function() {
15		- $("#slider0").slider({
	18	+ // change defaults for range, animate and orientation
	19	+ $.extend($.ui.slider.defaults, {
16	20	range: "min",
17		- value: 60
	21	+ animate: true,
	22	+ orientation: "vertical"
18	23	});
19		- $("#slider1").slider({
20		- orientation: "vertical",
21		- range: "min",
22		- value: 88
23		- });
24		- $("#slider2").slider({
25		- orientation: "vertical",
26		- range: "min",
27		- value: 77
28		- });
29		- $("#slider3").slider({
30		- orientation: "vertical",
31		- range: "min",
32		- value: 55
33		- });
34		- $("#slider4").slider({
35		- orientation: "vertical",
36		- range: "min",
37		- value: 33
38		- });
39		- $("#slider5").slider({
40		- orientation: "vertical",
41		- range: "min",
42		- value: 40
	24	+ // setup master volume
	25	+ $("#master").slider({
	26	+ value: 60,
	27	+ orientation: "horizontal"
43	28	});
44		- $("#slider6").slider({
45		- orientation: "vertical",
46		- range: "min",
47		- value: 45
48		- });
49		- $("#slider7").slider({
50		- orientation: "vertical",
51		- range: "min",
52		- value: 70
	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	+ })
53	37	});
54	38	});
55	39	</script>
...	...	@@ -63,20 +47,22 @@
63	47	Master volume
64	48	</p>
65	49
66		-<div id="slider0" style="width:260px; margin:15px;"></div>
	50	+<div id="master" style="width:260px; margin:15px;"></div>
67	51
68	52	<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
69	53	<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
70	54	Graphic EQ
71	55	</p>
72	56
73		-<div id="slider1" style="height:120px; float:left; margin:15px"></div>
74		-<div id="slider2" style="height:120px; float:left; margin:15px"></div>
75		-<div id="slider3" style="height:120px; float:left; margin:15px"></div>
76		-<div id="slider4" style="height:120px; float:left; margin:15px"></div>
77		-<div id="slider5" style="height:120px; float:left; margin:15px"></div>
78		-<div id="slider6" style="height:120px; float:left; margin:15px"></div>
79		-<div id="slider7" style="height:120px; float:left; margin:15px"></div>
	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>
80	66
81	67	</div><!-- End demo -->
82	68

jquery / jquery-ui

0 notes on commit cacb2ac Show line notes below

0 notes on commit `cacb2ac` Show line notes below