Author: fg.todd
Date: Tue Dec 30 11:08:39 2008
New Revision: 1354
Modified:
trunk/demos/slider/default.html
trunk/demos/slider/multiple_vertical.html
trunk/demos/slider/range.html
trunk/demos/slider/range_vertical.html
trunk/demos/slider/rangemax.html
trunk/demos/slider/rangemin.html
trunk/demos/slider/slider_vertical.html
trunk/demos/slider/steps.html
Log:
Added container divs and added descriptions
Modified: trunk/demos/slider/default.html
==============================================================================
--- trunk/demos/slider/default.html (original)
+++ trunk/demos/slider/default.html Tue Dec 30 11:08:39 2008
@@ -17,7 +17,24 @@
</head>
<body>
+
+
+<div class="demo">
+
<div id="slider"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+The default slider has a single handle and is horizontal. The handle
can be moved with the mouse or by using the arrow keys and has full ARIA
attributes for accessibility. The current value for the slider can be set
with the value option: <pre>value: 37</pre>
+
+</div><!-- End demo-description -->
+
+
+
</body>
</html>
Modified: trunk/demos/slider/multiple_vertical.html
==============================================================================
--- trunk/demos/slider/multiple_vertical.html (original)
+++ trunk/demos/slider/multiple_vertical.html Tue Dec 30 11:08:39 2008
@@ -53,6 +53,9 @@
</head>
<body>
+
+<div class="demo">
+
Master volume:
<div id="slider0" style="width:260px; margin:15px; clear:both;"></div>
@@ -66,5 +69,15 @@
<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><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This example shows how easy it is to add multiple sliders to a page,
each with their own options, to make a UI for a music player.
+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/slider/range.html
==============================================================================
--- trunk/demos/slider/range.html (original)
+++ trunk/demos/slider/range.html Tue Dec 30 11:08:39 2008
@@ -11,14 +11,33 @@
$(function() {
$("#slider-range").slider({
range: true,
- values: [17, 67]
+ min: 0,
+ max: 500,
+ values: [75, 300]
});
});
</script>
</head>
<body>
+
+
+
+Price range:
<div id="slider-range"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+Example of a range slider that had two drag handles and a filled bar
that connects the two handles to indicate that the values between them are
selected. THis is created by setting the range option:
+<pre>
+range: true,
+</pre>
+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/slider/range_vertical.html
==============================================================================
--- trunk/demos/slider/range_vertical.html (original)
+++ trunk/demos/slider/range_vertical.html Tue Dec 30 11:08:39 2008
@@ -19,7 +19,25 @@
</head>
<body>
-<div id="slider-range" style="height:300px;"></div>
+<div class="demo">
+
+<div id="slider-range" style="height:250px;"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This is an example of a vertical range slider created by setting the
orientation to vertical:
+<pre>
+orientation: "vertical",
+range: true,
+values: [17, 67]
+</pre>
+It's important to note that a vertical slider needs a height set. You
can do this via the script options or by adding a height through CSS.
+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/slider/rangemax.html
==============================================================================
--- trunk/demos/slider/rangemax.html (original)
+++ trunk/demos/slider/rangemax.html Tue Dec 30 11:08:39 2008
@@ -11,14 +11,32 @@
$(function() {
$("#slider-range-max").slider({
range: "max",
- value: 63
+ min:1,
+ max:10,
+ value: 2
});
});
</script>
</head>
<body>
+<div class="demo">
+
+Minimum number of bedrooms:
<div id="slider-range-max"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+An example of a range slider that has the filled bar hard-coded to the
maximum value plus a single slider. This makes it clear that selecting a
value will also include all values above the selection. This is a range
option type:
+<pre>
+range: "max",
+</pre>
+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/slider/rangemin.html
==============================================================================
--- trunk/demos/slider/rangemin.html (original)
+++ trunk/demos/slider/rangemin.html Tue Dec 30 11:08:39 2008
@@ -18,7 +18,24 @@
</head>
<body>
+<div class="demo">
+
+Maximum price:
<div id="slider-range-min"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+An example of a range slider that has the filled bar hard-coded to the
minimum value plus a single slider. This makes it clear that selecting a
value will also include all values below the selection. This is a range
option type:
+<pre>
+range: "min",
+</pre>
+
+</div><!-- End demo-description -->
+
</body>
</html>
Modified: trunk/demos/slider/slider_vertical.html
==============================================================================
--- trunk/demos/slider/slider_vertical.html (original)
+++ trunk/demos/slider/slider_vertical.html Tue Dec 30 11:08:39 2008
@@ -18,7 +18,21 @@
</head>
<body>
-<div id="slider-vertical" style="height:300px;"></div>
+
+<div class="demo">
+
+<div id="slider-vertical" style="height:250px;"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This is an example of a vertical slider created by setting the
orientation to vertical:
<pre>orientation: "vertical",</pre>
+It's important to note that a vertical slider needs a height set. You
can do this via the script options or by adding a height through CSS.
+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/slider/steps.html
==============================================================================
--- trunk/demos/slider/steps.html (original)
+++ trunk/demos/slider/steps.html Tue Dec 30 11:08:39 2008
@@ -17,7 +17,22 @@
</head>
<body>
+<div class="demo">
+
<div id="slider"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This slider has a step value set that will only allow for increments of
50 to be selected. The default step increment is 1. The drag handle will
snap to drop points every 50 units. This is set in an option called
step:
+<pre>
+min: 0, max: 500, step: 50
+</pre>
+
+</div><!-- End demo-description -->
</body>
</html>