jQuery UI esempio - dei rotatori (Spinner)
Con i tasti freccia su / giù e di elaborazione dei tasti, le funzioni di ingresso del testo migliorato valore di input.
Per maggiori dettagli sul elemento ruotante, consultare la documentazione API membro dei rotatori (Spinner il Widget) .
La funzione di default
Il rotatore di default.
<!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>
valuta
Questo esempio è una forma di donazione, con il numero di opzioni su valute e dei rotatori.
<!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>
decimale
Questo esempio è un rotatore decimale. Incrementi di 0,01. Codice che fare con cambiamenti culturali leggerà il valore corrente del selettore quando si cambia la cultura, si ripristinerà il valore in base allo stile della nuova cultura.
<! Html Doctype>
<HTML>
<Head>
<META charset = "utf-8">
<Title> jQuery UI dei rotatori (Spinner) - Decimale </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "/ static / js / jQueryUI / risorse / Demos / esterni / jquery.mousewheel.js"> </ script>
<script src = "/ static / js / jQueryUI / risorse / Demos / esterni / globalize.js"> </ script>
<Script src = "/ / static js / jQueryUI / risorse / demo / esterno / globalize.culture.de-DE.js"> </ script>
<Script src = "/ / static js / jQueryUI / risorse / demo / esterno / globalize.culture.ja-JP.js"> </ script>
<Src = "script // 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") .Per Passare (function () {
corrente var = $ ( "#spinner") .spinner ( "valore");
Globalize.culture ($ (this) .VAL ());
$ ( "#spinner") .spinner ( "Valore", in corso);
});
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "trottola"> decimale dei rotatori: </ label>
<Id = "filatrice" name = Valore di ingresso "filatrice" = "5.06">
</ P>
<P>
<Label for = "cultura"> Selezionare un formato per la cultura: </ label>
<Select id = "cultura">
<Option value = "it-IT" selected = "selezionato"> English </ option>
<Option value = "de-DE"> tedesco </ option>
<Option value = "ja-JP"> giapponese </ option>
</ Select>
</ P>
</ Corpo>
</ Html>
mappa
Google Maps integrazione, utilizzando uno spinner cambiare latitudine e longitudine.
<! Html Doctype>
<HTML>
<Head>
<META charset = "utf-8">
<Title> jQuery UI dei rotatori (Spinner) - Mappa </ 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>
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "/ static / js / jQueryUI / risorse / Demos / esterni / jquery.mousewheel.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
Funzione LatLong () {
return new google.maps.LatLng ($ ( "# lat") val (), $ ( "# lng") val () ..);
}
Posizione function () {
map.setCenter (LatLong ());
}
$ ( "#lat, #lng") .spinner ({
passo: .001,
cambiare: la posizione,
smettere: posizione
});
var map = new google.maps.Map ($ ( "# map") [0], {
zoom: 8,
Centro: LatLong (),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</ Script>
<Style>
#Map {
width: 500px;
altezza: 500px;
}
</ Style>
</ Head>
<Body>
<Label for = "lat"> latitudine </ label>
<Input id = nome = valore "lat" "lat" = "44,797">
<br>
<Label for = "lng"> Longitudine </ label>
<Input id = nome = valore "lng" "lng" = "- 93,278">
<Div id = "mappa"> </ div>
</ Corpo>
</ Html>
straripamento
limiti rotatori overflow da -10 a 10. Per un valore di 10 o più, troppopieno a -10, e viceversa.
<! Html Doctype>
<HTML>
<Head>
<META charset = "utf-8">
<Title> jQuery UI dei rotatori (Spinner) - Overflow </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "/ static / js / jQueryUI / risorse / Demos / esterni / jquery.mousewheel.js"> </ script>
<Src = "script // 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 ({
rotazione: la funzione (evento, ui) {
if (ui.value> 10) {
$ (This) .spinner ( "valore", -10);
return false;
} Else if (ui.value <-10) {
$ (This) .spinner ( "valore", 10);
return false;
}
}
});
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "trottola"> selezionare un valore: </ label>
<Input id = nome "filatrice" = "valore">
</ P>
</ Corpo>
</ Html>
tempo
Si estende da una parte dei rotatori personalizzati. Utilizzare Globalizzazione (globalizzazione) plug-in per analizzare e data e ora di uscita con step personalizzati e opzioni della pagina. Su / giù del cursore per i minuti su / giù, pagina su / giù per incrementi di ore / decremento.
<! Html Doctype>
<HTML>
<Head>
<META charset = "utf-8">
<Title> jQuery UI dei rotatori (Spinner) - Tempo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "/ static / js / jQueryUI / risorse / Demos / esterni / jquery.mousewheel.js"> </ script>
<script src = "/ static / js / jQueryUI / risorse / Demos / esterni / globalize.js"> </ script>
<Script src = "/ / static js / jQueryUI / risorse / demo / esterno / globalize.culture.de-DE.js"> </ script>
<Src = "script // 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, {
Opzioni: {
// Secondo passo: 60 * 1000,
// Pagina H: 60
},
_parse: function (value) {
se (valore typeof === "stringa") {
Ha un time stamp // if (Number (valore) == value) {
andata e ritorno Numero (valore);
}
ritornare + Globalize.parseDate (valore);
}
valore di ritorno;
},
_format: function (value) {
tornare Globalize.format (new Date (valore), "t");
}
});
$ (Function () {
$ ( "#spinner") .timespinner ();
$ ( "#culture") .Per Passare (function () {
corrente var = $ ( "#spinner") .timespinner ( "valore");
Globalize.culture ($ (this) .VAL ());
$ ( "#spinner") .timespinner ( "Valore", in corso);
});
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "trottola"> Tempo rotatori: </ label>
<Id = "filatrice" nome = valore "filatrice" Ingresso = "08:30">
</ P>
<P>
<Label for = "cultura"> Selezionare un formato per la cultura: </ label>
<Select id = "cultura">
<Option value = "it-IT" selected = "selezionato"> English </ option>
<Option value = "de-DE"> tedesco </ option>
</ Select>
</ P>
</ Corpo>
</ Html>