diff options
| author | Alvin Li <liweitianux@gmail.com> | 2013-10-09 15:52:53 +0800 |
|---|---|---|
| committer | Alvin Li <liweitianux@gmail.com> | 2013-10-09 15:52:53 +0800 |
| commit | 02afd8a32edb13ea7fc2266ac80092ea15c0930c (patch) | |
| tree | c7a2a3f50378c017b425da47e04a71c6beaae56c /97suifangqa/staticfiles/plugins/jquery-ui/demos/slider | |
| parent | fafce2cfc72f4e1cd14ff6cb693c8ec7854159c5 (diff) | |
| download | 97dev-02afd8a32edb13ea7fc2266ac80092ea15c0930c.tar.bz2 | |
* treat 'apps/utils' as regular django app; which used to store
general tools for used in other apps
* moved 'templatetags' from 'apps/indicator' to 'apps/utils'
* '.gitignore' to ignore 'fixtures_bak'
* moved js plugins from 'apps/indicator/static/plugins' to
'staticfiles/plugins'
apps/recommend:
* updated 'recommend.models';
o commented 'recommend.models.ResearchCombination' (not used)
* implemented views 'add_edit_blog_info' and 'ajax_add_edit_configs';
* added pages 'templates/recommend/add_edit_blog_info.html',
'add_edit_blog_info_error.html';
o related css and javascripts files
* added 'tools.py';
* added 'utils/tools.py' for placing generic functions;
* deleted 'initial_data.json' (mv 'fixtures' to 'fixtures_bak');
* small fixes to 'indicator.models', 'sciblog.models' and
'sfaccount.views'
* fixed automatically show 'proper_nouns' annotation in blog:
recovered the line 'import signals' in 'sciblog.models'
* added 'is_ok()' method for 'recommend.models.ResearchConfig';
Diffstat (limited to '97suifangqa/staticfiles/plugins/jquery-ui/demos/slider')
12 files changed, 634 insertions, 0 deletions
diff --git a/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/colorpicker.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/colorpicker.html new file mode 100644 index 0000000..e579b0e --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/colorpicker.html @@ -0,0 +1,87 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/default.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/default.html new file mode 100644 index 0000000..17ee430 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/default.html @@ -0,0 +1,27 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/hotelrooms.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/hotelrooms.html new file mode 100644 index 0000000..0968dc4 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/hotelrooms.html @@ -0,0 +1,49 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/index.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/index.html new file mode 100644 index 0000000..2d05bb5 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/index.html @@ -0,0 +1,24 @@ +<!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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/multiple-vertical.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/multiple-vertical.html new file mode 100644 index 0000000..6a0cf38 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/multiple-vertical.html @@ -0,0 +1,69 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/range-vertical.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/range-vertical.html new file mode 100644 index 0000000..a6f7f5a --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/range-vertical.html @@ -0,0 +1,41 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/range.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/range.html new file mode 100644 index 0000000..6a11338 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/range.html @@ -0,0 +1,42 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/rangemax.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/rangemax.html new file mode 100644 index 0000000..ca1c260 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/rangemax.html @@ -0,0 +1,40 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/rangemin.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/rangemin.html new file mode 100644 index 0000000..661fb24 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/rangemin.html @@ -0,0 +1,41 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/side-scroll.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/side-scroll.html new file mode 100644 index 0000000..346acb3 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/side-scroll.html @@ -0,0 +1,131 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/slider-vertical.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/slider-vertical.html new file mode 100644 index 0000000..2bea733 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/slider-vertical.html @@ -0,0 +1,42 @@ +<!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.9.1.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/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/steps.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/steps.html new file mode 100644 index 0000000..821fdc7 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/slider/steps.html @@ -0,0 +1,41 @@ +<!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.9.1.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> |