diff options
Diffstat (limited to 'include/jquery_ui/development-bundle/demos/slider')
13 files changed, 811 insertions, 0 deletions
diff --git a/include/jquery_ui/development-bundle/demos/slider/colorpicker.html b/include/jquery_ui/development-bundle/demos/slider/colorpicker.html new file mode 100644 index 000000000..f551c43bf --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/colorpicker.html @@ -0,0 +1,95 @@ +<!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.7.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> + #red, #green, #blue { + float: left; + clear: left; + width: 300px; + margin: 15px; + } + #swatch { + width: 120px; + height: 100px; + margin-top: 18px; + margin-left: 350px; + background-image: none; + } + #red .ui-slider-range { background: #ef2929; } + #red .ui-slider-handle { border-color: #ef2929; } + #green .ui-slider-range { background: #8ae234; } + #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) { + var hex = [ + r.toString( 16 ), + g.toString( 16 ), + b.toString( 16 ) + ]; + $.each( hex, function( nr, val ) { + if ( val.length === 1 ) { + hex[ nr ] = "0" + val; + } + }); + return hex.join( "" ).toUpperCase(); + } + function refreshSwatch() { + var red = $( "#red" ).slider( "value" ), + green = $( "#green" ).slider( "value" ), + blue = $( "#blue" ).slider( "value" ), + hex = hexFromRGB( red, green, blue ); + $( "#swatch" ).css( "background-color", "#" + hex ); + } + $(function() { + $( "#red, #green, #blue" ).slider({ + orientation: "horizontal", + range: "min", + max: 255, + value: 127, + slide: refreshSwatch, + change: refreshSwatch + }); + $( "#red" ).slider( "value", 255 ); + $( "#green" ).slider( "value", 140 ); + $( "#blue" ).slider( "value", 60 ); + }); + </script> +</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 +</p> + +<div id="red"></div> +<div id="green"></div> +<div id="blue"></div> + +<div id="swatch" class="ui-widget-content ui-corner-all"></div> + +</div><!-- End demo --> + + + +<div class="demo-description" style="clear:left;"> +<p>Combine three sliders to create a simple RGB colorpicker.</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/default.html b/include/jquery_ui/development-bundle/demos/slider/default.html new file mode 100644 index 000000000..dd39f07ce --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/default.html @@ -0,0 +1,37 @@ +<!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.7.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(); + }); + </script> +</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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/hotelrooms.html b/include/jquery_ui/development-bundle/demos/slider/hotelrooms.html new file mode 100644 index 000000000..a0ea31de1 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/hotelrooms.html @@ -0,0 +1,59 @@ +<!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.7.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" ); + var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({ + min: 1, + max: 6, + range: "min", + value: select[ 0 ].selectedIndex + 1, + slide: function( event, ui ) { + select[ 0 ].selectedIndex = ui.value - 1; + } + }); + $( "#minbeds" ).change(function() { + slider.slider( "value", this.selectedIndex + 1 ); + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<form id="reservation"> + <label for="minbeds">Minimum number of beds</label> + <select name="minbeds" id="minbeds"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + <option>6</option> + </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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/index.html b/include/jquery_ui/development-bundle/demos/slider/index.html new file mode 100644 index 000000000..caf68fe97 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/index.html @@ -0,0 +1,29 @@ +<!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> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/multiple-vertical.html b/include/jquery_ui/development-bundle/demos/slider/multiple-vertical.html new file mode 100644 index 000000000..080a40d4b --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/multiple-vertical.html @@ -0,0 +1,77 @@ +<!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.7.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 + } + </style> + <script> + $(function() { + // setup master volume + $( "#master" ).slider({ + value: 60, + orientation: "horizontal", + range: "min", + animate: true + }); + // setup graphic EQ + $( "#eq > span" ).each(function() { + // read initial values from markup and remove that + var value = parseInt( $( this ).text(), 10 ); + $( this ).empty().slider({ + value: value, + range: "min", + animate: true, + orientation: "vertical" + }); + }); + }); + </script> +</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-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> + Master volume +</p> + +<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="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 --> + + + +<div class="demo-description" style="clear:left;"> +<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/range-vertical.html b/include/jquery_ui/development-bundle/demos/slider/range-vertical.html new file mode 100644 index 000000000..d0abb1468 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/range-vertical.html @@ -0,0 +1,51 @@ +<!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.7.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({ + orientation: "vertical", + range: true, + values: [ 17, 67 ], + slide: function( event, ui ) { + $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); + } + }); + $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); + }); + </script> +</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;" /> +</p> + +<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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/range.html b/include/jquery_ui/development-bundle/demos/slider/range.html new file mode 100644 index 000000000..21c5080ec --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/range.html @@ -0,0 +1,52 @@ +<!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.7.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({ + range: true, + min: 0, + max: 500, + values: [ 75, 300 ], + slide: function( event, ui ) { + $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); + } + }); + $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); + }); + </script> +</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;" /> +</p> + +<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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/rangemax.html b/include/jquery_ui/development-bundle/demos/slider/rangemax.html new file mode 100644 index 000000000..3f04bcf4a --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/rangemax.html @@ -0,0 +1,50 @@ +<!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.7.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({ + range: "max", + min: 1, + max: 10, + value: 2, + slide: function( event, ui ) { + $( "#amount" ).val( ui.value ); + } + }); + $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); + }); + </script> +</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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/rangemin.html b/include/jquery_ui/development-bundle/demos/slider/rangemin.html new file mode 100644 index 000000000..125b73dfa --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/rangemin.html @@ -0,0 +1,51 @@ +<!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.7.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({ + range: "min", + value: 37, + min: 1, + max: 700, + slide: function( event, ui ) { + $( "#amount" ).val( "$" + ui.value ); + } + }); + $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); + }); + </script> +</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;" /> +</p> + +<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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/side-scroll.html b/include/jquery_ui/development-bundle/demos/slider/side-scroll.html new file mode 100644 index 000000000..be23f6923 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/side-scroll.html @@ -0,0 +1,140 @@ +<!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.7.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; } + * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */ + .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } + .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } + .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } + .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } + .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } + </style> + <script> + $(function() { + //scrollpane parts + var scrollPane = $( ".scroll-pane" ), + scrollContent = $( ".scroll-content" ); + + //build slider + var scrollbar = $( ".scroll-bar" ).slider({ + slide: function( event, ui ) { + if ( scrollContent.width() > scrollPane.width() ) { + scrollContent.css( "margin-left", Math.round( + ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) + ) + "px" ); + } else { + scrollContent.css( "margin-left", 0 ); + } + } + }); + + //append icon to handle + var handleHelper = scrollbar.find( ".ui-slider-handle" ) + .mousedown(function() { + scrollbar.width( handleHelper.width() ); + }) + .mouseup(function() { + scrollbar.width( "100%" ); + }) + .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) + .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); + + //change overflow to hidden now that slider handles the scrolling + scrollPane.css( "overflow", "hidden" ); + + //size scrollbar and handle proportionally to scroll distance + function sizeScrollbar() { + var remainder = scrollContent.width() - scrollPane.width(); + var proportion = remainder / scrollContent.width(); + var handleSize = scrollPane.width() - ( proportion * scrollPane.width() ); + scrollbar.find( ".ui-slider-handle" ).css({ + width: handleSize, + "margin-left": -handleSize / 2 + }); + handleHelper.width( "" ).width( scrollbar.width() - handleSize ); + } + + //reset slider value based on scroll content position + function resetValue() { + var remainder = scrollPane.width() - scrollContent.width(); + var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : + parseInt( scrollContent.css( "margin-left" ) ); + var percentage = Math.round( leftVal / remainder * 100 ); + scrollbar.slider( "value", percentage ); + } + + //if the slider is 100% and window gets larger, reveal content + function reflowContent() { + var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 ); + var gap = scrollPane.width() - showing; + if ( gap > 0 ) { + scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap ); + } + } + + //change handle position on window resize + $( window ).resize(function() { + resetValue(); + sizeScrollbar(); + reflowContent(); + }); + //init scrollbar size + setTimeout( sizeScrollbar, 10 );//safari wants a timeout + }); + </script> +</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> + <div class="scroll-content-item ui-widget-header">2</div> + <div class="scroll-content-item ui-widget-header">3</div> + <div class="scroll-content-item ui-widget-header">4</div> + <div class="scroll-content-item ui-widget-header">5</div> + <div class="scroll-content-item ui-widget-header">6</div> + <div class="scroll-content-item ui-widget-header">7</div> + <div class="scroll-content-item ui-widget-header">8</div> + <div class="scroll-content-item ui-widget-header">9</div> + <div class="scroll-content-item ui-widget-header">10</div> + <div class="scroll-content-item ui-widget-header">11</div> + <div class="scroll-content-item ui-widget-header">12</div> + <div class="scroll-content-item ui-widget-header">13</div> + <div class="scroll-content-item ui-widget-header">14</div> + <div class="scroll-content-item ui-widget-header">15</div> + <div class="scroll-content-item ui-widget-header">16</div> + <div class="scroll-content-item ui-widget-header">17</div> + <div class="scroll-content-item ui-widget-header">18</div> + <div class="scroll-content-item ui-widget-header">19</div> + <div class="scroll-content-item ui-widget-header">20</div> + </div> + <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> + <div class="scroll-bar"></div> + </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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/slider-vertical.html b/include/jquery_ui/development-bundle/demos/slider/slider-vertical.html new file mode 100644 index 000000000..0d3f1ee26 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/slider-vertical.html @@ -0,0 +1,52 @@ +<!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.7.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({ + orientation: "vertical", + range: "min", + min: 0, + max: 100, + value: 60, + slide: function( event, ui ) { + $( "#amount" ).val( ui.value ); + } + }); + $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) ); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p> + <label for="amount">Volume:</label> + <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> +</p> + +<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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/steps.html b/include/jquery_ui/development-bundle/demos/slider/steps.html new file mode 100644 index 000000000..7444df61f --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/steps.html @@ -0,0 +1,51 @@ +<!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.7.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({ + value:100, + min: 0, + max: 500, + step: 50, + slide: function( event, ui ) { + $( "#amount" ).val( "$" + ui.value ); + } + }); + $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) ); + }); + </script> +</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;" /> +</p> + +<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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/slider/tabs.html b/include/jquery_ui/development-bundle/demos/slider/tabs.html new file mode 100644 index 000000000..fec0a46ac --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/slider/tabs.html @@ -0,0 +1,67 @@ +<!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.7.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.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> |