diff options
Diffstat (limited to 'apps/it/static/js/ui/demos/slider')
-rw-r--r-- | apps/it/static/js/ui/demos/slider/colorpicker.html | 87 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/default.html | 27 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/hotelrooms.html | 49 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/index.html | 24 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/multiple-vertical.html | 69 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/range-vertical.html | 41 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/range.html | 42 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/rangemax.html | 40 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/rangemin.html | 41 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/side-scroll.html | 131 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/slider-vertical.html | 42 | ||||
-rw-r--r-- | apps/it/static/js/ui/demos/slider/steps.html | 41 |
12 files changed, 0 insertions, 634 deletions
diff --git a/apps/it/static/js/ui/demos/slider/colorpicker.html b/apps/it/static/js/ui/demos/slider/colorpicker.html deleted file mode 100644 index bf74b41..0000000 --- a/apps/it/static/js/ui/demos/slider/colorpicker.html +++ /dev/null @@ -1,87 +0,0 @@ -<!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.10.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; } - </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;"> - -<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 class="demo-description"> -<p>Combine three sliders to create a simple RGB colorpicker.</p> -</div> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/default.html b/apps/it/static/js/ui/demos/slider/default.html deleted file mode 100644 index d637412..0000000 --- a/apps/it/static/js/ui/demos/slider/default.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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.10.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"> - <script> - $(function() { - $( "#slider" ).slider(); - }); - </script> -</head> -<body> - -<div id="slider"></div> - -<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> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/hotelrooms.html b/apps/it/static/js/ui/demos/slider/hotelrooms.html deleted file mode 100644 index 189f3d3..0000000 --- a/apps/it/static/js/ui/demos/slider/hotelrooms.html +++ /dev/null @@ -1,49 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>jQuery UI Slider - Slider bound to select</title> - <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.10.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"> - <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> - -<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 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> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/index.html b/apps/it/static/js/ui/demos/slider/index.html deleted file mode 100644 index 2d05bb5..0000000 --- a/apps/it/static/js/ui/demos/slider/index.html +++ /dev/null @@ -1,24 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>jQuery UI Slider Demos</title> -</head> -<body> - -<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/apps/it/static/js/ui/demos/slider/multiple-vertical.html b/apps/it/static/js/ui/demos/slider/multiple-vertical.html deleted file mode 100644 index 66a3ab8..0000000 --- a/apps/it/static/js/ui/demos/slider/multiple-vertical.html +++ /dev/null @@ -1,69 +0,0 @@ -<!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.10.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> - #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> - -<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 class="demo-description"> -<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> -</div> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/range-vertical.html b/apps/it/static/js/ui/demos/slider/range-vertical.html deleted file mode 100644 index 31ecdb0..0000000 --- a/apps/it/static/js/ui/demos/slider/range-vertical.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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.10.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"> - <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> - -<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 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> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/range.html b/apps/it/static/js/ui/demos/slider/range.html deleted file mode 100644 index afde36d..0000000 --- a/apps/it/static/js/ui/demos/slider/range.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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.10.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"> - <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> - -<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 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> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/rangemax.html b/apps/it/static/js/ui/demos/slider/rangemax.html deleted file mode 100644 index d4cebe4..0000000 --- a/apps/it/static/js/ui/demos/slider/rangemax.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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.10.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"> - <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> - -<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 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> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/rangemin.html b/apps/it/static/js/ui/demos/slider/rangemin.html deleted file mode 100644 index cd86f9c..0000000 --- a/apps/it/static/js/ui/demos/slider/rangemin.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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.10.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"> - <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> - -<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 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> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/side-scroll.html b/apps/it/static/js/ui/demos/slider/side-scroll.html deleted file mode 100644 index 6c20a51..0000000 --- a/apps/it/static/js/ui/demos/slider/side-scroll.html +++ /dev/null @@ -1,131 +0,0 @@ -<!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.10.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> - .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; } - .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="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 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> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/slider-vertical.html b/apps/it/static/js/ui/demos/slider/slider-vertical.html deleted file mode 100644 index 33fc8e0..0000000 --- a/apps/it/static/js/ui/demos/slider/slider-vertical.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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.10.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"> - <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> - -<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 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> -</body> -</html> diff --git a/apps/it/static/js/ui/demos/slider/steps.html b/apps/it/static/js/ui/demos/slider/steps.html deleted file mode 100644 index 92b6a14..0000000 --- a/apps/it/static/js/ui/demos/slider/steps.html +++ /dev/null @@ -1,41 +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.10.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"> - <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> - -<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 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> -</body> -</html> |