/inventoryBrowser/node_modules/jquery-ui/demos/spinner/currency.html |
@@ -0,0 +1,44 @@ |
<!doctype html> |
<html lang="en"> |
<head> |
<meta charset="utf-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<title>jQuery UI Spinner - Currency</title> |
<link rel="stylesheet" href="../../themes/base/all.css"> |
<link rel="stylesheet" href="../demos.css"> |
<script src="../../external/requirejs/require.js"></script> |
<script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE external/globalize/globalize.culture.ja-JP external/jquery-mousewheel/jquery.mousewheel"> |
$( "#currency" ).on( "change", function() { |
$( "#spinner" ).spinner( "option", "culture", $( this ).val() ); |
}); |
|
$( "#spinner" ).spinner({ |
min: 5, |
max: 2500, |
step: 25, |
start: 1000, |
numberFormat: "C" |
}); |
</script> |
</head> |
<body> |
|
<p> |
<label for="spinner">Amount to donate:</label> |
<input id="spinner" name="spinner" value="5"> |
</p> |
|
<p> |
<label for="currency">Currency to donate</label> |
<select id="currency" name="currency"> |
<option value="en-US">US $</option> |
<option value="de-DE">EUR €</option> |
<option value="ja-JP">YEN ¥</option> |
</select> |
</p> |
|
<div class="demo-description"> |
<p>Example of a donation form, with currency selection and amount spinner.</p> |
</div> |
</body> |
</html> |
/inventoryBrowser/node_modules/jquery-ui/demos/spinner/decimal.html |
@@ -0,0 +1,47 @@ |
<!doctype html> |
<html lang="en"> |
<head> |
<meta charset="utf-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<title>jQuery UI Spinner - Decimal</title> |
<link rel="stylesheet" href="../../themes/base/all.css"> |
<link rel="stylesheet" href="../demos.css"> |
<script src="../../external/requirejs/require.js"></script> |
<script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE external/globalize/globalize.culture.ja-JP external/jquery-mousewheel/jquery.mousewheel"> |
$( "#spinner" ).spinner({ |
step: 0.01, |
numberFormat: "n" |
}); |
|
$( "#culture" ).on( "change", function() { |
var current = $( "#spinner" ).spinner( "value" ); |
Globalize.culture( $(this).val() ); |
$( "#spinner" ).spinner( "value", current ); |
}); |
</script> |
</head> |
<body> |
|
<p> |
<label for="spinner">Decimal spinner:</label> |
<input id="spinner" name="spinner" value="5.06"> |
</p> |
<p> |
<label for="culture">Select a culture to use for formatting:</label> |
<select id="culture"> |
<option value="en-EN" selected="selected">English</option> |
<option value="de-DE">German</option> |
<option value="ja-JP">Japanese</option> |
</select> |
</p> |
|
<div class="demo-description"> |
<p> |
Example of a decimal spinner. Step is set to 0.01. |
<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 |
formatting, based on the new culture. |
</p> |
</div> |
</body> |
</html> |
/inventoryBrowser/node_modules/jquery-ui/demos/spinner/default.html |
@@ -0,0 +1,58 @@ |
<!doctype html> |
<html lang="en"> |
<head> |
<meta charset="utf-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<title>jQuery UI Spinner - Default functionality</title> |
<link rel="stylesheet" href="../../themes/base/all.css"> |
<link rel="stylesheet" href="../demos.css"> |
<script src="../../external/requirejs/require.js"></script> |
<script src="../bootstrap.js" data-modules="external/jquery-mousewheel/jquery.mousewheel"> |
var spinner = $( "#spinner" ).spinner(); |
|
$( "#disable" ).on( "click", function() { |
if ( spinner.spinner( "option", "disabled" ) ) { |
spinner.spinner( "enable" ); |
} else { |
spinner.spinner( "disable" ); |
} |
}); |
$( "#destroy" ).on( "click", function() { |
if ( spinner.spinner( "instance" ) ) { |
spinner.spinner( "destroy" ); |
} else { |
spinner.spinner(); |
} |
}); |
$( "#getvalue" ).on( "click", function() { |
alert( spinner.spinner( "value" ) ); |
}); |
$( "#setvalue" ).on( "click", function() { |
spinner.spinner( "value", 5 ); |
}); |
|
$( "button" ).button(); |
</script> |
</head> |
<body> |
|
<p> |
<label for="spinner">Select a value:</label> |
<input id="spinner" name="value"> |
</p> |
|
<p> |
<button id="disable">Toggle disable/enable</button> |
<button id="destroy">Toggle widget</button> |
</p> |
|
<p> |
<button id="getvalue">Get value</button> |
<button id="setvalue">Set value to 5</button> |
</p> |
|
<div class="demo-description"> |
<p>Default spinner.</p> |
</div> |
</body> |
</html> |
/inventoryBrowser/node_modules/jquery-ui/demos/spinner/latlong.html |
@@ -0,0 +1,51 @@ |
<!doctype html> |
<html lang="en"> |
<head> |
<meta charset="utf-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<title>jQuery UI Spinner - Map</title> |
<link rel="stylesheet" href="../../themes/base/all.css"> |
<link rel="stylesheet" href="../demos.css"> |
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> |
<script src="../../external/requirejs/require.js"></script> |
<script src="../bootstrap.js" data-modules="external/jquery-mousewheel/jquery.mousewheel"> |
function latlong() { |
return new google.maps.LatLng( $("#lat").val(), $("#lng").val() ); |
} |
function position() { |
map.setCenter( latlong() ); |
} |
$( "#lat, #lng" ).spinner({ |
step: .001, |
change: position, |
stop: position |
}); |
|
var map = new google.maps.Map( $("#map")[0], { |
zoom: 8, |
center: latlong(), |
mapTypeId: google.maps.MapTypeId.ROADMAP |
}); |
</script> |
<style> |
#map { |
width:500px; |
height:500px; |
} |
</style> |
</head> |
<body> |
|
<label for="lat">Latitude</label> |
<input id="lat" name="lat" value="44.797"> |
<br> |
<label for="lng">Longitude</label> |
<input id="lng" name="lng" value="-93.278"> |
|
<div id="map"></div> |
|
<div class="demo-description"> |
<p>Google Maps integration, using spinners to change latitude and longitude.</p> |
</div> |
</body> |
</html> |
/inventoryBrowser/node_modules/jquery-ui/demos/spinner/overflow.html |
@@ -0,0 +1,38 @@ |
<!doctype html> |
<html lang="en"> |
<head> |
<meta charset="utf-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<title>jQuery UI Spinner - Overflow</title> |
<link rel="stylesheet" href="../../themes/base/all.css"> |
<link rel="stylesheet" href="../demos.css"> |
<script src="../../external/requirejs/require.js"></script> |
<script src="../bootstrap.js" data-modules="external/jquery-mousewheel/jquery.mousewheel"> |
$( "#spinner" ).spinner({ |
spin: function( event, ui ) { |
if ( ui.value > 10 ) { |
$( this ).spinner( "value", -10 ); |
return false; |
} else if ( ui.value < -10 ) { |
$( this ).spinner( "value", 10 ); |
return false; |
} |
} |
}); |
</script> |
</head> |
<body> |
|
<p> |
<label for="spinner">Select a value:</label> |
<input id="spinner" name="value" /> |
</p> |
|
<div class="demo-description"> |
<p> |
Overflowing spinner restricted to a range of -10 to 10. |
For anything above 10, it'll overflow to -10, and the other way round. |
</p> |
</div> |
</body> |
</html> |
/inventoryBrowser/node_modules/jquery-ui/demos/spinner/time.html |
@@ -0,0 +1,66 @@ |
<!doctype html> |
<html lang="en"> |
<head> |
<meta charset="utf-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<title>jQuery UI Spinner - Time</title> |
<link rel="stylesheet" href="../../themes/base/all.css"> |
<link rel="stylesheet" href="../demos.css"> |
<script src="../../external/requirejs/require.js"></script> |
<script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE external/jquery-mousewheel/jquery.mousewheel"> |
$.widget( "ui.timespinner", $.ui.spinner, { |
options: { |
// seconds |
step: 60 * 1000, |
// hours |
page: 60 |
}, |
|
_parse: function( value ) { |
if ( typeof value === "string" ) { |
// already a timestamp |
if ( Number( value ) == value ) { |
return Number( value ); |
} |
return +Globalize.parseDate( value ); |
} |
return value; |
}, |
|
_format: function( value ) { |
return Globalize.format( new Date(value), "t" ); |
} |
}); |
|
$( "#spinner" ).timespinner(); |
|
$( "#culture" ).on( "change", function() { |
var current = $( "#spinner" ).timespinner( "value" ); |
Globalize.culture( $(this).val() ); |
$( "#spinner" ).timespinner( "value", current ); |
}); |
</script> |
</head> |
<body> |
|
<p> |
<label for="spinner">Time spinner:</label> |
<input id="spinner" name="spinner" value="08:30 PM"> |
</p> |
<p> |
<label for="culture">Select a culture to use for formatting:</label> |
<select id="culture"> |
<option value="en-EN" selected="selected">English</option> |
<option value="de-DE">German</option> |
</select> |
</p> |
|
<div class="demo-description"> |
<p> |
A custom widget extending spinner. Use the Globalization plugin to parse and output |
a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down |
spins hours. |
</p> |
</div> |
</body> |
</html> |