jQuery UI Beispiel - Rotator (Spinner)
Durch die Auf- / Ab-Pfeiltasten und Tastenverarbeitung, den Eingangswert verbesserte Texteingabe-Funktionen.
Weitere Informationen über das Spinner Mitglied in der API - Dokumentation Rotatorteil (Spinner das Widget) .
Die Standardfunktion
Der Standard 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>
Währung
Dieses Beispiel ist ein Spendenformular, mit der Anzahl der Währungsoptionen und 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>
dezimal
Dieses Beispiel ist ein Dezimal-Rotator. Inkrementen von 0,01. Code mit kulturellen Veränderungen beschäftigen wird der aktuelle Wert des Wählers lesen, wenn die Kultur zu ändern, wird der Wert auf den Stil der neuen Kultur basiert zurückgesetzt.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI-Rotator (Spinner) - Dezimal </ 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 / extern / jquery.mousewheel.js"> </ script>
<Script src = "/ static / js / jQueryUI / resources / demos / extern / globalize.js"> </ script>
<Script src = "/ static / js / jQueryUI / resources / demos / extern / globalize.culture.de-DE.js"> </ script>
<Script src = "/ static / js / jQueryUI / resources / demos / extern / 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 ({
Schritt: 0,01,
NUMBER: "n"
});
$ ( "#Kultur") .change (Function () {
var current = $ ( "#spinner") .spinner ( "value");
Globalize.culture ($ (this) .val ());
$ ( "#spinner") .spinner ( "Value", Strom);
});
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "Spinner"> Dezimal-Rotator: </ label>
<Input id = "Spinner" name = "Spinner" value = "5.06">
</ P>
<P>
<Label for = "Kultur"> Wählen Sie ein Format für die Kultur: </ label>
<Wählen Sie id = "Kultur">
<Option value = "en-DE" selected = "selected"> Englisch </ option>
<Option value = "de-DE"> Deutsch </ option>
<Option value = "de-DE"> Japanisch </ option>
</ Select>
</ P>
</ Body>
</ Html>
Karte
Google Maps-Integration, unter Verwendung eines Spinners die Breite und die Länge zu ändern.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI-Rotator (Spinner) - Karte </ 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 / extern / 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 () {
Funktion latlong () {
return new google.maps.LatLng ($ ( "# lat") val (), $ ( "# lng") val () ..);
}
Funktion position () {
map.setCenter (LatLong ());
}
$ ( "#lat, #lng") .spinner ({
Schritt: .001,
ändern: Position,
Stopp: Position
});
var map = new google.maps.Map ($ ( "# map") [0], {
Zoom: 8,
Zentrum: LatLong (),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</ Script>
<Style>
#map {
Breite: 500px;
Höhe: 500px;
}
</ Style>
</ Head>
<Body>
<Label for = "lat"> Breite </ label>
<Input id = "lat" name = "lat" value = "44,797">
<br>
<Label for = "lng"> Länge </ label>
<Input id = "lng" name = "lng" value = "- 93,278">
<Div id = "Karte"> </ div>
</ Body>
</ Html>
Überlauf
Überlauf-Rotator Grenzen von -10 bis 10. Bei einem Wert von 10 oder mehr, Überlauf auf -10, und umgekehrt.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI-Rotator (Spinner) - Überlauf </ 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 / extern / 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"> wählen Sie einen Wert: </ label>
<Input id = "Spinner" name = "Wert">
</ P>
</ Body>
</ Html>
Zeit
Es erstreckt sich von einem Rotator benutzerdefinierte Teile. Verwenden Globalisierung (Globalisierung) Plug-in zu analysieren und Ausgabezeitstempel mit benutzerdefinierten Schritt und Optionen auf der Seite. Auf- / Ab-Cursor für Minuten nach oben / unten, Seite nach oben / unten für Stunden erhöht / erniedrigt wird.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI-Rotator (Spinner) - Zeit </ 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 / extern / jquery.mousewheel.js"> </ script>
<Script src = "/ static / js / jQueryUI / resources / demos / extern / globalize.js"> </ script>
<Script src = "/ static / js / jQueryUI / resources / demos / extern / 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, {
Optionen: {
// Zweiter Schritt: 60 * 1000,
// H Seite: 60
},
_parse: function (value) {
if (typeof Wert === "string") {
Hat ein Zeitstempel // if (Number (Wert) == value) {
zurück Anzahl (Wert);
}
Rückkehr + Globalize.parseDate (Wert);
}
Rückkehr Wert;
},
_FORMAT: function (value) {
Rückkehr Globalize.format (new Date (Wert), "t");
}
});
$ (Function () {
$ ( "#spinner") .timespinner ();
$ ( "#Kultur") .change (Function () {
var current = $ ( "#spinner") .timespinner ( "value");
Globalize.culture ($ (this) .val ());
$ ( "#spinner") .timespinner ( "Value", Strom);
});
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "Spinner"> Zeit Rotator: </ label>
<Input id = "Spinner" name = "Spinner" value = "08.30">
</ P>
<P>
<Label for = "Kultur"> Wählen Sie ein Format für die Kultur: </ label>
<Wählen Sie id = "Kultur">
<Option value = "en-DE" selected = "selected"> Englisch </ option>
<Option value = "de-DE"> Deutsch </ option>
</ Select>
</ P>
</ Body>
</ Html>