Introduction:
The Spinner, or number stepper widget, is perfect for handling all
kinds of numeric input. It allows users to type a value directly, or
modify an existing value by spinning with the keyboard, mouse or
scrollwheel. When combined with Globalize, you can even spin currencies
and dates in a variety of locales.
Spinner wraps a text input with two buttons to increment and
decrement the current value. Key events are added so that the same
incrementing and decrementing can be done with the keyboard. Spinner
delegates to Globalize for number formatting and parsing.
Example:
<html>
<head>
<title>jQuery UI Spinner - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="/resources/demos/external/jquery.mousewheel.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
var spinner = $( "#spinner" ).spinner();
$( "#disable" ).click(function() {
if ( spinner.spinner( "option", "disabled" ) ) {
spinner.spinner( "enable" );
} else {
spinner.spinner( "disable" );
}
});
$( "#destroy" ).click(function() {
if ( spinner.data( "ui-spinner" ) ) {
spinner.spinner( "destroy" );
} else {
spinner.spinner();
}
});
$( "#getvalue" ).click(function() {
alert( spinner.spinner( "value" ) );
});
$( "#setvalue" ).click(function() {
spinner.spinner( "value", 5 );
});
$( "button" ).button();
});
</script>
</head>
<body>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value" />
<br />
<button id="disable">Toggle disable/enable</button>
<button id="destroy">Toggle widget</button>
<br />
<button id="getvalue">Get value</button>
<button id="setvalue">Set value to 5</button>
<br />
</body>
</html>
0 comments :
Post a Comment