Spinner
Enhanced text entry functionality for entering numerical values with up/down button and arrow key handling.
For more details about the spinner widget, check out the API documentation Spinner Widget.
Default function
The default spinner.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 旋转器（Spinner） - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<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>
<p>
<label for="spinner">选择一个值：</label>
<input id="spinner" name="value">
</p>
<p>
<button id="disable">切换禁用/启用</button>
<button id="destroy">切换部件</button>
</p>
<p>
<button id="getvalue">获取值</button>
<button id="setvalue">设置值为 5</button>
</p>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
currency
This example is a donation form with currency selection and amount spinner.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 旋转器（Spinner） - 货币</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#currency" ).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="currency">要捐款的货币</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>
<p>
<label for="spinner">要捐款的数量：</label>
<input id="spinner" name="spinner" value="5">
</p>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
decimal
This example is a decimal spinner. The increment is set to 0.01. The code that handles culture changes reads the current selector value, and when the culture is changed, restyles the value based on the new culture.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 旋转器（Spinner） - 小数</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#spinner" ).spinner({
step: 0.01,
numberFormat: "n"
});
$( "#culture" ).change(function() {
var current = $( "#spinner" ).spinner( "value" );
Globalize.culture( $(this).val() );
$( "#spinner" ).spinner( "value", current );
});
});
</script>
</head>
<body>
<p>
<label for="spinner">小数旋转器：</label>
<input id="spinner" name="spinner" value="5.06">
</p>
<p>
<label for="culture">选择一种用于格式化的文化：</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>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
map
Google Maps integration, use rotator to change latitude and longitude.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 旋转器（Spinner） - 地图</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
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">纬度</label>
<input id="lat" name="lat" value="44.797">
<br>
<label for="lng">经度</label>
<input id="lng" name="lng" value="-93.278">
<div id="map"></div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
overflow
Overflow spinner limits range from -10 to 10. For values above 10, overflow occurs to -10 and vice versa.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 旋转器（Spinner） - 溢出</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#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">选择一个值：</label>
<input id="spinner" name="value">
</p>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
time
A custom widget that extends the spinner. Use the Globalization plugin to parse and output timestamps, with custom step and page options. Cursor up/down is used to increment/decrement minutes, page up/down is used to increment/decrement hours.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 旋转器（Spinner） - 时间</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$.widget( "ui.timespinner", $.ui.spinner, {
options: {
// 秒
step: 60 * 1000,
// 小时
page: 60
},
_parse: function( value ) {
if ( typeof value === "string" ) {
// 已经是一个时间戳
if ( Number( value ) == value ) {
return Number( value );
}
return +Globalize.parseDate( value );
}
return value;
},
_format: function( value ) {
return Globalize.format( new Date(value), "t" );
}
});
$(function() {
$( "#spinner" ).timespinner();
$( "#culture" ).change(function() {
var current = $( "#spinner" ).timespinner( "value" );
Globalize.culture( $(this).val() );
$( "#spinner" ).timespinner( "value", current );
});
});
</script>
</head>
<body>
<p>
<label for="spinner">时间旋转器：</label>
<input id="spinner" name="spinner" value="08:30 PM">
</p>
<p>
<label for="culture">选择一种用于格式化的文化：</label>
<select id="culture">
<option value="en-EN" selected="selected">English</option>
<option value="de-DE">German</option>
</select>
</p>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
