O melhor tutorial jQuery UI exemplo - rotador (Spinner) em 2024. Neste tutorial você pode aprender A função padrão,moeda,decimal,mapa,transbordamento,tempo,
Pelos botões de seta para cima / baixo e processamento de chave, as funções de entrada de texto melhorado valor de entrada.
Para mais detalhes sobre o membro giratório, consulte a documentação da API membro do rotator (Spinner o Widget) .
O rotador padrão.
<!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>
Este exemplo é uma forma de doação, com o número de opções de moeda e rotador.
<!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>
Este exemplo é um rotador decimal. Incrementos de 0,01. Código lidar com mudanças culturais irá ler o valor atual do selector quando mudar a cultura, ele irá repor o valor com base no estilo da nova cultura.
<! DOCTYPE html> <Html> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI rotador (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 / externos / jquery.mousewheel.js"> </ script> <script src = "/ static / js / jQueryUI / Resources / Demos / externos / globalize.js"> </ script> <Script src = "/ / estáticos js / jqueryui / recursos / demos / externa / globalize.culture.de-DE.js"> </ script> <Script src = "/ / estáticos js / jqueryui / recursos / demos / externa / 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 ({ passo: 0,01, Numberformat: "N" }); $ ( "#culture") .change (Function () { .spinner var atual = $ ( "#spinner") ( "value"); Globalize.culture ($ (this) .val ()); $ ( "#spinner") .spinner ( "Valor", em curso); }); }); </ Script> </ Head> <Body> <P> <Label for = "Spinner"> decimal rotador: </ label> <Id = "Spinner" name = valor de entrada "Spinner" = "5,06"> </ P> <P> <Label for = "cultura"> Selecione um formato para a cultura: </ label> <Id = "cultura"> <Option value = "en-PT" selected = "selected"> Inglês </ option> <Option value = "de-DE"> German </ option> <Option value = "ja-JP"> japonês </ option> </ Select> </ P> </ Body> </ Html>
a integração do Google Maps, usando um botão rotativo para mudar a latitude e longitude.
<! DOCTYPE html> <Html> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI rotador (Spinner) - 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 = "/ static / js / jQueryUI / Resources / Demos / externos / 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 () { LatLong function () { retornar nova google.maps.LatLng ($ ( "# lat") val (), $ ( "# LNG") val () pt); } posição function () { map.setCenter (LatLong ()); } $ ( "#lat, #lng") .spinner ({ etapa: .001, alterar: posição, parar: Posição }); var map = new google.maps.Map ($ ( "# map") [0], { zoom: 8, Centro: 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 = value "lat" = "44,797"> <br> <Label for = "LNG"> Longitude </ label> <Id de entrada = "LNG" name = value "LNG" = "- 93,278"> <Div id = "mapa"> </ div> </ Body> </ Html>
limites rotador estouro de -10 a 10. Para um valor de 10 ou mais, excesso a -10, e vice-versa.
<! DOCTYPE html> <Html> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI rotador (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 / externos / 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 ({ rotação: function (evento, ui) { Se (ui.value> 10) { $ (Este) .spinner ( "value", -10); return false; } Else if (ui.value <-10) { $ (Este) .spinner ( "valor", 10); return false; } } }); }); </ Script> </ Head> <Body> <P> <Label for = "Spinner"> selecione um valor: </ label> <Input id = "Spinner" name = "value"> </ P> </ Body> </ Html>
Estende-se a partir de uma peças personalizadas rotador. Use Globalization (Globalização) plug-in para analisar e hora de saída com o passo personalizado e opções da página. Para cima / baixo do cursor para minutos up / down, page up / down por horas incrementos / decréscimo.
<! DOCTYPE html> <Html> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI rotador (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 / externos / jquery.mousewheel.js"> </ script> <script src = "/ static / js / jQueryUI / Resources / Demos / externos / globalize.js"> </ script> <Script src = "/ / estáticos js / jqueryui / recursos / demos / externa / 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, { opções: { // Segunda etapa: 60 * 1000, // Página H: 60 }, _parse: function (value) { if (valor typeof === "string") { Tem um carimbo de tempo // if (número (valor) == value) { Ida e Volta Número (valor); } retornar + Globalize.parseDate (valor); } valor retornar; }, _format: function (value) { voltar Globalize.format (new Date (valor), "t"); } }); $ (Function () { $ ( "#spinner") .timespinner (); $ ( "#culture") .change (Function () { .timespinner var atual = $ ( "#spinner") ( "value"); Globalize.culture ($ (this) .val ()); $ ( "#spinner") .timespinner ( "Valor", em curso); }); }); </ Script> </ Head> <Body> <P> <Label for = "Spinner"> rotator Time: </ label> <Id = "Spinner" name = valor de entrada "Spinner" = "8:30"> </ P> <P> <Label for = "cultura"> Selecione um formato para a cultura: </ label> <Id = "cultura"> <Option value = "en-PT" selected = "selected"> Inglês </ option> <Option value = "de-DE"> German </ option> </ Select> </ P> </ Body> </ Html>