The best jQuery UI example - rotator (Spinner) Tutorial In 2024, In this tutorial you can learn The default function,currency,Decimal,map,overflow,time,
By the up / down arrow buttons and key processing, the input value enhanced text input functions.
For more details about the spinner member, see the API documentation rotator member (Spinner the Widget) .
The default rotator.
<!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>
This example is a donation form, with the number of currency options and rotator.
<!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>
This example is a decimal rotator. Increments of 0.01. Code dealing with cultural changes will read the current value of the selector when changing the culture, it will reset the value based on the style of the new culture.
<! Doctype html> <Html> <Head> <Meta charset = "utf-8"> <Title> jQuery UI rotator (Spinner) - Decimal </ 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"> decimal rotator: </ label> <Input id = "spinner" name = "spinner" value = "5.06"> </ P> <P> <Label for = "culture"> Select a format for the 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>
Google Maps integration, using a spinner to change the latitude and longitude.
<! Doctype html> <Html> <Head> <Meta charset = "utf-8"> <Title> jQuery UI rotator (Spinner) - Map </ 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 ()/en); } 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> </ Body> </ Html>
Overflow rotator limits from -10 to 10. For a value of 10 or more, overflow to -10, and vice versa.
<! Doctype html> <Html> <Head> <Meta charset = "utf-8"> <Title> jQuery UI rotator (Spinner) - Overflow </ 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"> select a value: </ label> <Input id = "spinner" name = "value"> </ P> </ Body> </ Html>
It extends from a rotator custom parts. Use Globalization (Globalization) plug-in to parse and output time stamp with custom step and page options. Up / down cursor for minutes up / down, page up / down for hours increments / decrement.
<! Doctype html> <Html> <Head> <Meta charset = "utf-8"> <Title> jQuery UI rotator (Spinner) - Time </ 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: { // Second step: 60 * 1000, // H page: 60 }, _parse: function (value) { if (typeof value === "string") { Has a time stamp // 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"> Time rotator: </ label> <Input id = "spinner" name = "spinner" value = "08:30 PM"> </ P> <P> <Label for = "culture"> Select a format for the culture: </ label> <Select id = "culture"> <Option value = "en-EN" selected = "selected"> English </ option> <Option value = "de-DE"> German </ option> </ Select> </ P> </ Body> </ Html>