library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Spinner demos: Cleanup.

Browse Source
This commit is contained in:
Scott González 2011-08-07 12:59:50 -04:00
parent 6c84531d7c
commit ca2211f748
7 changed files with 197 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
demos/spinner/currency.html
View File

@ -1,35 +1,34 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title> <title>jQuery UI Spinner - Default functionality</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.6.2.js"></script> <script src="../../jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script> <script src="../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../external/jquery.global.js"></script> <script src="../../external/jquery.global.js"></script>
<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script> <script src="../../external/jquery.global.de-DE.js"></script>
<script type="text/javascript" src="../../external/jquery.global.ja-JP.js"></script> <script src="../../external/jquery.global.ja-JP.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script> <script src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#currency").change(function() { $( "#currency" ).change(function() {
var current = $("#spinner").spinner("value"); var current = $( "#spinner" ).spinner( "value" );
$.global.preferCulture($(this).val()); $.global.preferCulture( $(this).val() );
$("#spinner").spinner("value", current); $( "#spinner" ).spinner( "value", current );
}) });
$("#spinner").spinner({ $( "#spinner" ).spinner({
min: 5, min: 5,
max: 2500, max: 2500,
step: 25, step: 25,
start: 1000, start: 1000,
numberFormat: "C" numberFormat: "C"
}); });
}); });
</script> </script>
</head> </head>
@ -47,15 +46,16 @@
</p> </p>
<p> <p>
<label for="spinner">Amount to donate:</label> <label for="spinner">Amount to donate:</label>
<input id="spinner" name="spinner" value="5" /> <input id="spinner" name="spinner" value="5">
</p> </p>
</div>
</div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p> <p>Example of a donation form, with currency selection and amout spinner.</p>
Example of a donation form, with currency selection and amout spinner. </div><!-- End demo-description -->
</p>
</div>
</body> </body>
</html> </html>

52
demos/spinner/decimal.html
View File

@ -1,40 +1,41 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Spinner - decimal</title> <title>jQuery UI Spinner - Decimal</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.6.2.js"></script> <script src="../../jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script> <script src="../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../external/jquery.global.js"></script> <script src="../../external/jquery.global.js"></script>
<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script> <script src="../../external/jquery.global.de-DE.js"></script>
<script type="text/javascript" src="../../external/jquery.global.ja-JP.js"></script> <script src="../../external/jquery.global.ja-JP.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script> <script src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#spinner").spinner({ $( "#spinner" ).spinner({
step: 0.01, step: 0.01,
numberFormat: "n" numberFormat: "n"
}); });
$("#culture").change(function() { $( "#culture" ).change(function() {
var current = $("#spinner").spinner("value"); var current = $( "#spinner" ).spinner( "value" );
$.global.preferCulture($(this).val()); $.global.preferCulture( $(this).val() );
$("#spinner").spinner("value", current); $( "#spinner" ).spinner( "value", current );
}) });
}); });
</script> </script>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<p> <p>
<label for="spinner">Decimal spinner:</label> <label for="spinner">Decimal spinner:</label>
<input id="spinner" name="spinner" value="5.06" /> <input id="spinner" name="spinner" value="5.06">
</p> </p>
<p> <p>
<label for="culture">Select a culture to use for formatting:</label> <label for="culture">Select a culture to use for formatting:</label>
@ -44,16 +45,19 @@
<option value="ja-JP">Japanese</option> <option value="ja-JP">Japanese</option>
</select> </select>
</p> </p>
</div>
</div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p> <p>
Example of a decimal spinner. Step is set to 0.01. Example of a decimal spinner. Step is set to 0.01.
<br/>The code handling the culture change reads the current spinner value, <br>The code handling the culture change reads the current spinner value,
then changes the culture, then sets the value again, resulting in an updated then changes the culture, then sets the value again, resulting in an updated
formatting, based on the new culture. formatting, based on the new culture.
</p> </p>
</div> </div><!-- End demo-description -->
</body> </body>
</html> </html>

83
demos/spinner/default.html
View File

@ -1,43 +1,38 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title> <title>jQuery UI Spinner - Default functionality</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.6.2.js"></script> <script src="../../jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script> <script src="../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../external/jquery.global.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.spinner.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script> <link rel="stylesheet" href="../demos.css">
<link type="text/css" href="../demos.css" rel="stylesheet" /> <script>
<script type="text/javascript">
$(function() { $(function() {
$("#spinner").spinner({ var spinner = $( "#spinner" ).spinner();
change: function() {
console.log( "change" ); $( "#disable" ).toggle(function() {
} spinner.spinner( "disable" );
}, function() {
spinner.spinner( "enable" );
});
$( "#destroy" ).toggle(function() {
spinner.spinner( "destroy" );
}, function() {
spinner.spinner();
});
$( "#getvalue" ).click(function() {
alert( spinner.spinner( "value" ) );
});
$( "#setvalue" ).click(function() {
spinner.spinner( "value", 5 );
}); });
$("#disable").toggle(function() { $( "button" ).button();
$("#spinner").spinner("disable");
}, function() {
$("#spinner").spinner("enable");
});
$("#destroy").toggle(function() {
$("#spinner").spinner("destroy");
}, function() {
$("#spinner").spinner();
});
$("#getvalue").click(function() {
alert($("#spinner").spinner("value"));
});
$("#setvalue").click(function() {
$("#spinner").spinner("value", 5);
});
$("button").button();
}); });
</script> </script>
</head> </head>
@ -45,25 +40,27 @@
<div class="demo"> <div class="demo">
<p><label for="spinner">Select a value:</label>
<input id="spinner" name="value" /></p>
<p> <p>
<button id="disable">Toggle disable/enable</button> <label for="spinner">Select a value:</label>
<button id="destroy">Toggle widget</button> <input id="spinner" name="value">
</p> </p>
<p> <p>
<button id="getvalue">Get value</button> <button id="disable">Toggle disable/enable</button>
<button id="setvalue">Set value to 5</button> <button id="destroy">Toggle widget</button>
</p>
<p>
<button id="getvalue">Get value</button>
<button id="setvalue">Set value to 5</button>
</p> </p>
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p> <p>Default spinner.</p>
Default spinner.
</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

29
demos/spinner/index.html
View File

@ -1,20 +1,23 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8">
<title>jQuery UI Spinner Demos</title> <title>jQuery UI Spinner Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
</head> </head>
<body> <body>
<div class="demos-nav">
<h4>Examples</h4> <div class="demos-nav">
<ul> <h4>Examples</h4>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li> <ul>
<li><a href="decimal.html">Decimal</a></li> <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="currency.html">Currency</a></li> <li><a href="decimal.html">Decimal</a></li>
<li><a href="latlong.html">Map</a></li> <li><a href="currency.html">Currency</a></li>
<li><a href="time.html">Time</a></li> <li><a href="latlong.html">Map</a></li>
<li><a href="overflow.html">Overflow</a></li> <li><a href="time.html">Time</a></li>
</ul> <li><a href="overflow.html">Overflow</a></li>
</div> </ul>
</div>
</body> </body>
</html> </html>

47
demos/spinner/latlong.html
View File

@ -1,31 +1,31 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Spinner - Map</title> <title>jQuery UI Spinner - Map</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../../jquery-1.6.2.js"></script> <script src="../../jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script> <script src="../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script> <script src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <script>
$(function() { $(function() {
function latlong() { function latlong() {
return new google.maps.LatLng($("#lat").val(),$("#lng").val()); return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
} }
function position() { function position() {
map.setCenter(latlong()); map.setCenter( latlong() );
} }
$("#lat, #lng").spinner({ $( "#lat, #lng" ).spinner({
precision: 6, precision: 6,
change: position change: position
}); });
var map = new google.maps.Map($("#map")[0], { var map = new google.maps.Map( $("#map")[0], {
zoom: 8, zoom: 8,
center: latlong(), center: latlong(),
mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeId: google.maps.MapTypeId.ROADMAP
@ -33,7 +33,10 @@
}); });
</script> </script>
<style> <style>
#map { width:500px; height:500px; } #map {
width:500px;
height:500px;
}
</style> </style>
</head> </head>
<body> <body>
@ -41,19 +44,19 @@
<div class="demo"> <div class="demo">
<label for="lat">Latitude</label> <label for="lat">Latitude</label>
<input id="lat" name="lat" value="44.797916" /> <input id="lat" name="lat" value="44.797916">
<br/> <br>
<label for="lng">Longitude</label> <label for="lng">Longitude</label>
<input id="lng" name="lng" value="-93.278046" /> <input id="lng" name="lng" value="-93.278046">
<div id="map"></div> <div id="map"></div>
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p> <p>Google Maps integration, using spinners to change latidude and longitude.</p>
Google Maps integration, using spinners to change latidude and longitude.
</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

58
demos/spinner/overflow.html
View File

@ -1,25 +1,25 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title> <title>jQuery UI Spinner - Overflow</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.6.2.js"></script> <script src="../../jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script> <script src="../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script> <script src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#spinner").spinner({ $( "#spinner" ).spinner({
spin: function(event, ui) { spin: function( event, ui ) {
if (ui.value > 10) { if ( ui.value > 10 ) {
$(this).spinner("value", -10); $( this ).spinner( "value", -10 );
return false; return false;
} else if (ui.value < -10) { } else if ( ui.value < -10 ) {
$(this).spinner("value", 10); $( this ).spinner( "value", 10 );
return false; return false;
} }
} }
@ -30,18 +30,22 @@
<body> <body>
<div class="demo"> <div class="demo">
<p>
<label for="spinner">Select a value:</label> <p>
<input id="spinner" name="value" /> <label for="spinner">Select a value:</label>
</p> <input id="spinner" name="value" />
</div> </p>
</div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p> <p>
Overflowing spinner restricted to a range of -10 to 10. Overflowing spinner restricted to a range of -10 to 10.
For anything above 10, it'll overflow to -10, and the other way round. For anything above 10, it'll overflow to -10, and the other way round.
</p> </p>
</div> </div><!-- End demo-description -->
</body> </body>
</html> </html>

64
demos/spinner/time.html
View File

@ -1,20 +1,20 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Spinner - decimal</title> <title>jQuery UI Spinner - Time</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.6.2.js"></script> <script src="../../jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script> <script src="../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../external/jquery.global.js"></script> <script src="../../external/jquery.global.js"></script>
<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script> <script src="../../external/jquery.global.de-DE.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script> <script src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <script>
$.widget("ui.timespinner", $.ui.spinner, { $.widget( "ui.timespinner", $.ui.spinner, {
options: { options: {
// seconds // seconds
step: 60 * 1000, step: 60 * 1000,
@ -22,23 +22,25 @@
page: 60 page: 60
}, },
_parse: function(value) { _parse: function( value ) {
if (typeof value == 'string') { if ( typeof value === "string" ) {
return +$.global.parseDate(value) return +$.global.parseDate( value );
} }
return value; return value;
}, },
_format: function() {
this.element.val( $.global.format(new Date(this.options.value), "t") );
}
})
$(function() {
$("#spinner").timespinner();
$("#culture").change(function() { _format: function() {
var current = $("#spinner").timespinner("value"); this.element.val( $.global.format( new Date(this.options.value), "t" ) );
$.global.preferCulture($(this).val()); }
$("#spinner").timespinner("value", current); });
$(function() {
$( "#spinner" ).timespinner();
$( "#culture" ).change(function() {
var current = $( "#spinner" ).timespinner( "value" );
$.global.preferCulture( $(this).val() );
$( "#spinner" ).timespinner( "value", current );
}); });
}); });
</script> </script>
@ -48,7 +50,7 @@
<div class="demo"> <div class="demo">
<p> <p>
<label for="spinner">Time spinner:</label> <label for="spinner">Time spinner:</label>
<input id="spinner" name="spinner" value="08:30 PM" /> <input id="spinner" name="spinner" value="08:30 PM">
</p> </p>
<p> <p>
<label for="culture">Select a culture to use for formatting:</label> <label for="culture">Select a culture to use for formatting:</label>
@ -57,7 +59,9 @@
<option value="de-DE">German</option> <option value="de-DE">German</option>
</select> </select>
</p> </p>
</div> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p> <p>
@ -65,7 +69,7 @@
a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down
spins hours. spins hours.
</p> </p>
</div> </div><!-- End demo-description -->
</body> </body>
</html> </html>