diff options
Diffstat (limited to 'demos/slider')
-rw-r--r-- | demos/slider/colorpicker.html | 16 | ||||
-rw-r--r-- | demos/slider/default.html | 16 | ||||
-rw-r--r-- | demos/slider/hotelrooms.html | 16 | ||||
-rw-r--r-- | demos/slider/index.html | 33 | ||||
-rw-r--r-- | demos/slider/multiple-vertical.html | 18 | ||||
-rw-r--r-- | demos/slider/range-vertical.html | 16 | ||||
-rw-r--r-- | demos/slider/range.html | 16 | ||||
-rw-r--r-- | demos/slider/rangemax.html | 16 | ||||
-rw-r--r-- | demos/slider/rangemin.html | 16 | ||||
-rw-r--r-- | demos/slider/side-scroll.html | 14 | ||||
-rw-r--r-- | demos/slider/slider-vertical.html | 16 | ||||
-rw-r--r-- | demos/slider/steps.html | 16 | ||||
-rw-r--r-- | demos/slider/tabs.html | 67 |
13 files changed, 50 insertions, 226 deletions
diff --git a/demos/slider/colorpicker.html b/demos/slider/colorpicker.html index 2b7906f09..db0339ff3 100644 --- a/demos/slider/colorpicker.html +++ b/demos/slider/colorpicker.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Colorpicker</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> @@ -30,7 +30,6 @@ #green .ui-slider-handle { border-color: #8ae234; } #blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; } - #demo-frame > div.demo { padding: 10px !important; }; </style> <script> function hexFromRGB(r, g, b) { @@ -70,8 +69,6 @@ </head> <body class="ui-widget-content" style="border:0;"> -<div class="demo"> - <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> Simple Colorpicker @@ -83,13 +80,8 @@ <div id="swatch" class="ui-widget-content ui-corner-all"></div> -</div><!-- End demo --> - - - -<div class="demo-description" style="clear:left;"> +<div class="demo-description"> <p>Combine three sliders to create a simple RGB colorpicker.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/default.html b/demos/slider/default.html index 43a0b1208..ff30e41e4 100644 --- a/demos/slider/default.html +++ b/demos/slider/default.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8" > <title>jQuery UI Slider - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; } - </style> <script> $(function() { $( "#slider" ).slider(); @@ -21,17 +18,10 @@ </head> <body> -<div class="demo"> - <div id="slider"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <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 --> - +</div> </body> </html> diff --git a/demos/slider/hotelrooms.html b/demos/slider/hotelrooms.html index cad838bf7..d866261b5 100644 --- a/demos/slider/hotelrooms.html +++ b/demos/slider/hotelrooms.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed minimum</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { var select = $( "#minbeds" ); @@ -33,8 +30,6 @@ </head> <body> -<div class="demo"> - <form id="reservation"> <label for="minbeds">Minimum number of beds</label> <select name="minbeds" id="minbeds"> @@ -47,13 +42,8 @@ </select> </form> -</div><!-- End demo --> - - - <div class="demo-description"> <p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/index.html b/demos/slider/index.html index caf68fe97..2d05bb58b 100644 --- a/demos/slider/index.html +++ b/demos/slider/index.html @@ -1,29 +1,24 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <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 minimum</a></li> - <li><a href="hotelrooms.html">Room reservation</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 sliders</a></li> - <li><a href="colorpicker.html">Simple colorpicker</a></li> - <li><a href="side-scroll.html">Simple scrollbar</a></li> - <li><a href="tabs.html">Slider controls tabs</a></li> - </ul> -</div> +<ul> + <li><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 minimum</a></li> + <li><a href="hotelrooms.html">Room reservation</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 sliders</a></li> + <li><a href="colorpicker.html">Simple colorpicker</a></li> + <li><a href="side-scroll.html">Simple scrollbar</a></li> +</ul> </body> </html> diff --git a/demos/slider/multiple-vertical.html b/demos/slider/multiple-vertical.html index f154d1de4..5a529b287 100644 --- a/demos/slider/multiple-vertical.html +++ b/demos/slider/multiple-vertical.html @@ -1,17 +1,16 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Multiple sliders</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - #demo-frame > div.demo { padding: 10px !important; } #eq span { height:120px; float:left; margin:15px } @@ -39,9 +38,7 @@ }); </script> </head> -<body class="ui-widget-content" style="border:0;"> - -<div class="demo"> +<body> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> @@ -65,13 +62,8 @@ <span>70</span> </div> -</div><!-- End demo --> - - - -<div class="demo-description" style="clear:left;"> +<div class="demo-description"> <p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/range-vertical.html b/demos/slider/range-vertical.html index b5c2f3303..8f6da21da 100644 --- a/demos/slider/range-vertical.html +++ b/demos/slider/range-vertical.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Vertical range slider</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-range" ).slider({ @@ -30,8 +27,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Target sales goal (Millions):</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -39,13 +34,8 @@ <div id="slider-range" style="height:250px;"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Change the orientation of the range slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/range.html b/demos/slider/range.html index bfb699b55..052c2f5a8 100644 --- a/demos/slider/range.html +++ b/demos/slider/range.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range slider</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-range" ).slider({ @@ -31,8 +28,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Price range:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -40,13 +35,8 @@ <div id="slider-range"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Set the <code>range</code> 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 --> - +</div> </body> </html> diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html index f313e193e..8107c66d2 100644 --- a/demos/slider/rangemax.html +++ b/demos/slider/rangemax.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed maximum</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-range-max" ).slider({ @@ -30,21 +27,14 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Minimum number of bedrooms:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <div id="slider-range-max"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the <code>range</code> option to "max."</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html index 992ed2918..5a0bed662 100644 --- a/demos/slider/rangemin.html +++ b/demos/slider/rangemin.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed minimum</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-range-min" ).slider({ @@ -30,8 +27,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Maximum price:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -39,13 +34,8 @@ <div id="slider-range-min"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <code>range</code> option to "min."</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/side-scroll.html b/demos/slider/side-scroll.html index 84cd54a80..4ca49b9c2 100644 --- a/demos/slider/side-scroll.html +++ b/demos/slider/side-scroll.html @@ -1,17 +1,16 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Slider scrollbar</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - #demo-frame > div.demo { padding: 10px !important; } .scroll-pane { overflow: auto; width: 99%; float:left; } .scroll-content { width: 2440px; float: left; } .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } @@ -98,8 +97,6 @@ </head> <body> -<div class="demo"> - <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> <div class="scroll-content"> <div class="scroll-content-item ui-widget-header">1</div> @@ -128,13 +125,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <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 --> - +</div> </body> </html> diff --git a/demos/slider/slider-vertical.html b/demos/slider/slider-vertical.html index 3a4c10f46..45e93330d 100644 --- a/demos/slider/slider-vertical.html +++ b/demos/slider/slider-vertical.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Vertical slider</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-vertical" ).slider({ @@ -31,8 +28,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Volume:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -40,13 +35,8 @@ <div id="slider-vertical" style="height:200px;"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Change the orientation of the slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/steps.html b/demos/slider/steps.html index 93589f546..7f1ec6314 100644 --- a/demos/slider/steps.html +++ b/demos/slider/steps.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Snap to increments</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider" ).slider({ @@ -30,8 +27,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Donation amount ($50 increments):</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -39,13 +34,8 @@ <div id="slider"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/tabs.html b/demos/slider/tabs.html deleted file mode 100644 index c7c169567..000000000 --- a/demos/slider/tabs.html +++ /dev/null @@ -1,67 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>jQuery UI Slider - Snap to increments</title> - <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> - <script src="../../ui/jquery.ui.core.js"></script> - <script src="../../ui/jquery.ui.widget.js"></script> - <script src="../../ui/jquery.ui.mouse.js"></script> - <script src="../../ui/jquery.ui.tabs.js"></script> - <script src="../../ui/jquery.ui.slider.js"></script> - <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; } - </style> - <script> - $(function() { - $( "#tabs" ).tabs({ - select: function( event, ui ) { - $( "#slider" ).slider( "value", ui.index ); - } - }); - $( "#slider" ).slider({ - min: 0, - max: $( "#tabs" ).tabs( "length" ) - 1, - slide: function( event, ui ) { - $( "#tabs" ).tabs( "select", ui.value ); - } - }); - }); - </script> -</head> -<body> - -<div class="demo"> - -<div id="slider" style="width:100px"></div> - -<div id="tabs"> - <ul> - <li><a href="#tabs-1">Nunc tincidunt</a></li> - <li><a href="#tabs-2">Proin dolor</a></li> - <li><a href="#tabs-3">Aenean lacinia</a></li> - </ul> - <div id="tabs-1"> - <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> - </div> - <div id="tabs-2"> - <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> - </div> - <div id="tabs-3"> - <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> - <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> - </div> -</div> - -</div><!-- End demo --> - - - -<div class="demo-description"> -<p>Control tabs with a slider.</p> -</div><!-- End demo-description --> - -</body> -</html> |