Najlepszy samouczek jQuery UI przykład - rotatorów (Spinner) W 2024 r. W tym samouczku możesz dowiedzieć się Domyślną funkcją,waluta,dziesiętny,mapa,przelewowy,czas,
Przez górę / w dół przycisków strzałek i przetwarzania klucza, funkcje wejściowe wzmocnione tekstowych wartości wejściowych.
Aby uzyskać więcej informacji na temat członka spinner, należy przejrzeć dokumentację API członek rotatorów (Spinner Widget) .
Domyślną rotatorów.
<!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>
Ten przykład jest formą darowizny, z liczbą opcji walutowych i rotatora.
<!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>
Ten przykład jest rotator dziesiętnym. Przyrosty 0,01. Kodeks postępowania w przypadku zmian kulturowych odczytuje bieżącą wartość selektora przy zmianie kultury, to wyzerować wartość na podstawie stylu nowej kultury.
<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> jQuery UI rotatorów (Prządka) - dziesiętny </ 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 = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / jquery.mousewheel.js"> </ script> <script src = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / globalize.js"> </ script> <Script src = "/ / statyczne js / jqueryui / resources / demos / zewnętrzna / globalize.culture.de-DE.js"> </ script> <Script src = "/ / statyczne js / jqueryui / resources / demos / zewnętrzna / 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 ({ krok: 0,01, numberFormat: "n" }); $ ( "#culture") .change (Function () { var prądu = $ ( "#spinner") .spinner ( "value"); Globalize.culture ($ (this) .val ()); $ ( "#spinner") .spinner ( "Value", prąd); }); }); </ Script> </ Head> <Body> <P> <Label for = "spinner"> dziesiętny rotator: </ label> <Id = "spinner" nazwa = wartość "spinner" Input = "5.06"> </ P> <P> <Label for = "kultury"> Wybierz format dla kultury: </ label> <Select id = "kultura"> <Wartość Option = "pl-PL" selected = "wybrany"> angielski </ option> <Wartość Option = "de-DE"> niemiecki </ option> <Wartość Option = "ja-JP"> japoński </ option> </ Select> </ P> </ Body> </ Html>
Integracja z Google Maps, za pomocą pokrętła, aby zmienić szerokość i długość geograficzną.
<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> jQuery UI rotatorów (Prządka) - mapa </ 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 = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / 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 () { Funkcja LatLong () { powrót nowa google.maps.LatLng ($ ( "# lat") val (), $ ( "# LNG") val () pl); } Stanowisko function () { map.setCenter (LatLong ()); } $ ( "#lat, #lng") .spinner ({ krok: 0,001, zmiany: pozycja, stop: stanowisko }); var map = new google.maps.Map ($ ( "# map") [0] { Powiększenie: 8, Centrum: LatLong () mapTypeId: google.maps.MapTypeId.ROADMAP }); }); </ Script> <Style> #map { width: 500px; height: 500px; } </ Style> </ Head> <Body> <Label for = "ac"> szerokości </ label> <Id = Wejście "ac" name = "ac" value = "44,797"> Największa <Label for = "LNG"> Długość </ label> <Id = Wejście "LNG" nazwa = wartość "LNG" = "- 93,278"> <Div id = "map"> </ div> </ Body> </ Html>
Przelewowe limity rotator od -10 do 10. O wartości 10 lub więcej, zbiorniki do -10 ° C, i vice versa.
<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> jQuery UI rotatorów (Prządka) - przelewowy </ 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 = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / 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 ({ wirowania: function (event, ui) { if (ui.value> 10) { $ (This) .spinner ( "wartość", -10); return false; } Else if (ui.value <-10) { $ (This) .spinner ( "wartość", 10); return false; } } }); }); </ Script> </ Head> <Body> <P> <Label for = "spinner"> wybierz wartość: </ label> <Wejście id = "spinner" name = "wartość"> </ P> </ Body> </ Html>
Rozciąga się z rotatorem niestandardowych części. Użyj Globalization (globalizacja) plug-in do analizowania i datownik wyjście z niestandardowym kroku i opcje strony. Góra / dół kursor przez kilka minut w górę / w dół, strona w górę / w dół w odstępach godzin / ubytek.
<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> jQuery UI rotatorów (Prządka) - 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 = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / jquery.mousewheel.js"> </ script> <script src = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / globalize.js"> </ script> <Script src = "/ / statyczne js / jqueryui / resources / demos / zewnętrzna / 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 { Opcje: { // Drugi etap: 60 * 1000, // H Strona: 60 } _parse: function (value) { if (typeof wartość === "string") { Posiada znacznik czasu // if (Number (value) == value) { powrót Ilość (wartość); } powrotu + Globalize.parseDate (value); } wartość powrotu; } _format: function (value) { powrót Globalize.format (new Date (wartość), "T"); } }); $ (Function () { $ ( "#spinner") .timespinner (); $ ( "#culture") .change (Function () { var prądu = $ ( "#spinner") .timespinner ( "value"); Globalize.culture ($ (this) .val ()); $ ( "#spinner") .timespinner ( "Value", prąd); }); }); </ Script> </ Head> <Body> <P> <Label for = "spinner"> rotator Czas: </ label> <Wejście id = "spinner" name = "spinner" value = "20:30"> </ P> <P> <Label for = "kultury"> Wybierz format dla kultury: </ label> <Select id = "kultura"> <Wartość Option = "pl-PL" selected = "wybrany"> angielski </ option> <Wartość Option = "de-DE"> niemiecki </ option> </ Select> </ P> </ Body> </ Html>