aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorMaggie Costello Wachs <fg.maggie@gmail.com>2009-01-20 21:10:12 +0000
committerMaggie Costello Wachs <fg.maggie@gmail.com>2009-01-20 21:10:12 +0000
commit88d8063be47711fe5c0b9390a91fc12c8c6daec0 (patch)
tree6e0125b4715abff50a3b03953bac62a54ed2c88f /demos
parent565808ceaef9387d8d4c7c6cf6bcaf5efaf63658 (diff)
downloadjquery-ui-88d8063be47711fe5c0b9390a91fc12c8c6daec0.tar.gz
jquery-ui-88d8063be47711fe5c0b9390a91fc12c8c6daec0.zip
slightly reorganized/renamed demos to better reflect functionality
Diffstat (limited to 'demos')
-rw-r--r--demos/slider/colorpicker.html6
-rw-r--r--demos/slider/default.html6
-rw-r--r--demos/slider/index.html12
-rw-r--r--demos/slider/multiple_vertical.html6
-rw-r--r--demos/slider/range.html10
-rw-r--r--demos/slider/range_vertical.html20
-rw-r--r--demos/slider/rangemax.html15
-rw-r--r--demos/slider/rangemin.html15
-rw-r--r--demos/slider/side_scroll.html6
-rw-r--r--demos/slider/slider_vertical.html18
-rw-r--r--demos/slider/steps.html18
11 files changed, 26 insertions, 106 deletions
diff --git a/demos/slider/colorpicker.html b/demos/slider/colorpicker.html
index 60e673ede..7bd4edf1e 100644
--- a/demos/slider/colorpicker.html
+++ b/demos/slider/colorpicker.html
@@ -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 @@ Simple Colorpicker
<div class="demo-description" style="clear:left;">
-<p>
-This example shows how easy it is to put together three sliders to make a simple RGB colorpicker.
-</p>
+<p>Combine three sliders to create a simple RGB colorpicker.</p>
</div><!-- End demo-description -->
diff --git a/demos/slider/default.html b/demos/slider/default.html
index 196af067a..4adc27053 100644
--- a/demos/slider/default.html
+++ b/demos/slider/default.html
@@ -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">
-<p>
-The default slider has a single handle and is horizontal. The handle can be moved with the mouse or by using the arrow keys.
-</p>
+<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->
diff --git a/demos/slider/index.html b/demos/slider/index.html
index cd89f6bcc..2319efad6 100644
--- a/demos/slider/index.html
+++ b/demos/slider/index.html
@@ -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>
diff --git a/demos/slider/multiple_vertical.html b/demos/slider/multiple_vertical.html
index ba6d9b2c2..1a279b026 100644
--- a/demos/slider/multiple_vertical.html
+++ b/demos/slider/multiple_vertical.html
@@ -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 @@ Graphic EQ
<div class="demo-description" style="clear:left;">
-<p>
-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.
-</p>
+<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
</div><!-- End demo-description -->
diff --git a/demos/slider/range.html b/demos/slider/range.html
index 356fad63c..8bc8a5cd9 100644
--- a/demos/slider/range.html
+++ b/demos/slider/range.html
@@ -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">
-<p>
-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:
-</p>
-
-<pre><code>range: true
-</code></pre>
+<p>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.</p>
</div><!-- End demo-description -->
diff --git a/demos/slider/range_vertical.html b/demos/slider/range_vertical.html
index fe1bef044..7d80bd3a1 100644
--- a/demos/slider/range_vertical.html
+++ b/demos/slider/range_vertical.html
@@ -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">
-<p>
-This is an example of a vertical range slider created by setting the orientation to vertical:
-</p>
-
-<pre><code>orientation: "vertical",
-range: true,
-values: [17, 67]
-</code></pre>
-
-<p>
-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.
-</p>
-
-<p>
-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.
-</p>
+<p>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."</p>
</div><!-- End demo-description -->
diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html
index 148474e8f..7d51f8d34 100644
--- a/demos/slider/rangemax.html
+++ b/demos/slider/rangemax.html
@@ -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">
-<p>
-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:
-</p>
-
-<pre><code>range: "max"
-</code></pre>
-
-<p>
-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.
-</p>
+<p>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."</p>
</div><!-- End demo-description -->
diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html
index 7642deb8b..ad0addc11 100644
--- a/demos/slider/rangemin.html
+++ b/demos/slider/rangemin.html
@@ -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">
-<p>
-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:
-</p>
-
-<pre><code>range: "min"
-</code></pre>
-
-<p>
-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.
-</p>
+<p>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."</p>
</div><!-- End demo-description -->
diff --git a/demos/slider/side_scroll.html b/demos/slider/side_scroll.html
index fbe1fa651..0c33228a0 100644
--- a/demos/slider/side_scroll.html
+++ b/demos/slider/side_scroll.html
@@ -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">
-<p>
-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.
-</p>
+<p>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.</p>
</div><!-- End demo-description -->
diff --git a/demos/slider/slider_vertical.html b/demos/slider/slider_vertical.html
index 5a663edda..f0be30e0e 100644
--- a/demos/slider/slider_vertical.html
+++ b/demos/slider/slider_vertical.html
@@ -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">
-<p>
-This is an example of a minimum range vertical slider created by setting the orientation to vertical:
-</p>
-
-<pre><code>orientation: "vertical"
-</code></pre>
-
-<p>
-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.
-</p>
-
-<p>
-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.
-</p>
+<p>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."</p>
</div><!-- End demo-description -->
diff --git a/demos/slider/steps.html b/demos/slider/steps.html
index cbbf5f469..25064f526 100644
--- a/demos/slider/steps.html
+++ b/demos/slider/steps.html
@@ -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">
-<p>
-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:
-</p>
-
-<pre><code>min: 0,
-max: 500,
-step: 50
-</code></pre>
-
-<p>
-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.
-</p>
+<p>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.</p>
</div><!-- End demo-description -->
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-29 12:37:17 +0000