Author: fg.maggie
Date: Tue Jan 20 13:10:12 2009
New Revision: 1728
Modified:
trunk/demos/slider/colorpicker.html
trunk/demos/slider/default.html
trunk/demos/slider/index.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/side_scroll.html
trunk/demos/slider/slider_vertical.html
trunk/demos/slider/steps.html
Log:
slightly reorganized/renamed demos to better reflect functionality
Modified: trunk/demos/slider/colorpicker.html
==============================================================================
--- trunk/demos/slider/colorpicker.html (original)
+++ trunk/demos/slider/colorpicker.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Colorpicker Demo</title>
+ <title>jQuery UI Slider - Colorpicker</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -83,9 +83,7 @@
<div class="demo-description" style="clear:left;">
-
-This example shows how easy it is to put together three sliders to make a
simple RGB colorpicker.
-
+Combine three sliders to create a simple RGB colorpicker.
</div><!-- End demo-description -->
Modified: trunk/demos/slider/default.html
==============================================================================
--- trunk/demos/slider/default.html (original)
+++ trunk/demos/slider/default.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Default Demo</title>
+ <title>jQuery UI Slider - Default functionality</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -26,9 +26,7 @@
<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.
-
+The basic slider is horizontal and has a single handle that can be
moved with the mouse or by using the arrow keys.
</div><!-- End demo-description -->
Modified: trunk/demos/slider/index.html
==============================================================================
--- trunk/demos/slider/index.html (original)
+++ trunk/demos/slider/index.html Tue Jan 20 13:10:12 2009
@@ -9,14 +9,14 @@
<div class="demos-nav">
<h4>Examples</h4>
<ul>
- <li class="demo-config-on"><a href="default.html">Default Slider</a></li>
- <li><a href="steps.html">Snap to every 50 steps</a></li>
+ <li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
+ <li><a href="steps.html">Snap to increments</a></li>
<li><a href="range.html">Range slider</a></li>
- <li><a href="rangemin.html">Range with fixed min</a></li>
- <li><a href="rangemax.html">Range with fixed max</a></li>
- <li><a href="slider_vertical.html">Vertical single slider</a></li>
+ <li><a href="rangemin.html">Range with fixed minimum</a></li>
+ <li><a href="rangemax.html">Range with fixed maximum</a></li>
+ <li><a href="slider_vertical.html">Vertical slider</a></li>
<li><a href="range_vertical.html">Vertical range slider</a></li>
- <li><a href="multiple_vertical.html">Multiple vertical sliders</a></li>
+ <li><a href="multiple_vertical.html">Multiple sliders</a></li>
<li><a href="colorpicker.html">Simple colorpicker</a></li>
<li><a href="side_scroll.html">Simple scrollbar</a></li>
</ul>
Modified: trunk/demos/slider/multiple_vertical.html
==============================================================================
--- trunk/demos/slider/multiple_vertical.html (original)
+++ trunk/demos/slider/multiple_vertical.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Multiple Vertical Sliders Demo</title>
+ <title>jQuery UI Slider - Multiple sliders</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -82,9 +82,7 @@
<div class="demo-description" style="clear:left;">
-
-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.
-
+Combine horizontal and vertical sliders, each with their own options,
to create the UI for a music player.
</div><!-- End demo-description -->
Modified: trunk/demos/slider/range.html
==============================================================================
--- trunk/demos/slider/range.html (original)
+++ trunk/demos/slider/range.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Range Demo</title>
+ <title>jQuery UI Slider - Range slider</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -40,13 +40,7 @@
<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><code>range: true
-</code></pre>
+Set the <strong>range</strong> option to true to capture a range of
values with two drag handles. The space between the handles is filled with
a different background color to indicate those values are selected.
</div><!-- End demo-description -->
Modified: trunk/demos/slider/range_vertical.html
==============================================================================
--- trunk/demos/slider/range_vertical.html (original)
+++ trunk/demos/slider/range_vertical.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Vertical Range Demo</title>
+ <title>jQuery UI Slider - Vertical range slider</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -39,23 +39,7 @@
<div class="demo-description">
-
-This is an example of a vertical range slider created by setting the
orientation to vertical:
-
-
-<pre><code>orientation: "vertical",
-range: true,
-values: [17, 67]
-</code></pre>
-
-
-It's important to note that a vertical slider needs a height set.
-You can do this via <code>.height()</code> or by setting the height
through CSS.
-
-
-
-This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
-
+Change the orientation of the range slider to vertical. Assign a
height value via <strong>.height()</strong> or by setting the height
through CSS, and set the <strong>orientation</strong> option
to "vertical."
</div><!-- End demo-description -->
Modified: trunk/demos/slider/rangemax.html
==============================================================================
--- trunk/demos/slider/rangemax.html (original)
+++ trunk/demos/slider/rangemax.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Range Max Demo</title>
+ <title>jQuery UI Slider - Range with fixed maximum</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -39,18 +39,7 @@
<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><code>range: "max"
-</code></pre>
-
-
-This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
-
+Fix the maximum value of the range slider so that the user can only
select a minimum. Set the <strong>range</strong> option to "max."
</div><!-- End demo-description -->
Modified: trunk/demos/slider/rangemin.html
==============================================================================
--- trunk/demos/slider/rangemin.html (original)
+++ trunk/demos/slider/rangemin.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Range Min Demo</title>
+ <title>jQuery UI Slider - Range with fixed minimum</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -40,18 +40,7 @@
<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><code>range: "min"
-</code></pre>
-
-
-This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
-
+Fix the minimum value of the range slider so that the user can only
select a maximum. Set the <strong>range</strong> option to "min."
</div><!-- End demo-description -->
Modified: trunk/demos/slider/side_scroll.html
==============================================================================
--- trunk/demos/slider/side_scroll.html (original)
+++ trunk/demos/slider/side_scroll.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Default Demo</title>
+ <title>jQuery UI Slider - Slider scrollbar</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -126,9 +126,7 @@
<div class="demo-description">
-
-Example of how a slider can be used to manipulate the positioning of
content on the page. In this case, it acts as a scrollbar.
-
+Use a slider to manipulate the positioning of content on the page. In
this case, it acts as a scrollbar with the potential to capture values if
needed.
</div><!-- End demo-description -->
Modified: trunk/demos/slider/slider_vertical.html
==============================================================================
--- trunk/demos/slider/slider_vertical.html (original)
+++ trunk/demos/slider/slider_vertical.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Vertical Single Slider Demo</title>
+ <title>jQuery UI Slider - Vertical slider</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -41,21 +41,7 @@
<div class="demo-description">
-
-This is an example of a minimum range vertical slider created by setting
the orientation to vertical:
-
-
-<pre><code>orientation: "vertical"
-</code></pre>
-
-
-It's important to note that a vertical slider needs a height set.
-You can do this via <code>.height()</code> or by setting the height
through CSS.
-
-
-
-This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
-
+Change the orientation of the slider to vertical. Assign a height
value via <strong>.height()</strong> or by setting the height through CSS,
and set the <strong>orientation</strong> option to "vertical."
</div><!-- End demo-description -->
Modified: trunk/demos/slider/steps.html
==============================================================================
--- trunk/demos/slider/steps.html (original)
+++ trunk/demos/slider/steps.html Tue Jan 20 13:10:12 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Steps Demo</title>
+ <title>jQuery UI Slider - Snap to increments</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -40,21 +40,7 @@
<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><code>min: 0,
-max: 500,
-step: 50
-</code></pre>
-
-
-This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
-
+Increment slider values with the <strong>step</strong> option set to an
integer, commonly a dividend of the slider's maximum value. The default
increment is 1.
</div><!-- End demo-description -->