jQuery UI ejemplo - rotador (Spinner)
Por los botones de flecha arriba / abajo y procesamiento de clave, las funciones de entrada de texto mejora del valor de entrada.
Para más detalles sobre el miembro giratorio, consulte la documentación de la API elemento rotatorio (Spinner el widget) .
La función predeterminada
El rotador por defecto.
<!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>
moneda
Este ejemplo es una forma de donación, con el número de opciones sobre divisas y de los rotadores.
<!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>
decimal
Este ejemplo es un rotador decimal. Incrementos de 0,01. Código hacer frente a los cambios culturales leerá el valor actual del selector cuando se cambia la cultura, se restablecerá el valor basado en el estilo de la nueva cultura.
<! DOCTYPE html>
<Html>
<Head>
<Charset Meta = "UTF-8">
<Título> 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áticas js / jQueryUI / recursos / demos / externa / globalize.culture.de-DE.js"> </ script>
<Script src = "/ / estáticas 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 ({
paso: 0,01,
NumberFormat: "n"
});
$ ( "#culture") .Cambiar (Function () {
var actual = $ ( "#spinner") .spinner ( "valor");
Globalize.culture ($ (this) .val ());
$ ( "#spinner") .spinner ( "Valor", en curso);
});
});
</ Script>
</ Head>
<Cuerpo>
<P>
<Label for = "spinner"> decimal de los rotadores: </ label>
<Entrada de id = name = "spinner" "spinner" = "5.06">
</ P>
<P>
<Label for = "cultura"> Seleccione un formato para la cultura: </ label>
<Select id = "cultura">
<Option value = "es-ES" selected = "selected"> Inglés </ option>
<Option value = "de-DE"> Alemán </ option>
<Option value = "ja-JP"> Japonés </ option>
</ Select>
</ P>
</ Body>
</ Html>
mapa
la integración de Google Maps, utilizando un control de giro para cambiar la latitud y la longitud.
<! DOCTYPE html>
<Html>
<Head>
<Charset Meta = "UTF-8">
<Título> 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 función () {
return new google.maps.LatLng ($ ( "lat #") val (), $ ( "# GNL") val () ..);
}
posición de la función () {
map.setCenter (LatLong ());
}
$ ( "#lat, #lng") .spinner ({
paso: .001,
cambiar: posición,
detener: Posición
});
var map = new google.maps.Map ($ ( "# mapa") [0], {
zoom: 8,
Centro: LatLong (),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</ Script>
<Style>
#Map {
Anchura: 500px;
altura: 500px;
}
</ Style>
</ Head>
<Cuerpo>
<Label for = "lat"> latitud </ label>
<Entrada id = "lat" nombre = valor "lat" = "44.797">
<br>
<Label for = "lng"> Longitud </ label>
<Entrada de id = name = "lng" "lng" = "- 93.278">
<Div id = "mapa"> </ div>
</ Body>
</ Html>
desbordamiento
límites de los rotadores de desbordamiento de -10 a 10. Para un valor de 10 o más, el desbordamiento de -10, y viceversa.
<! DOCTYPE html>
<Html>
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI rotador (Spinner) - Desbordamiento </ 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 ({
centrifugado: function (event, ui) {
si (ui.value> 10) {
$ (Este) .spinner ( "valor", -10);
return false;
} Else if (ui.value <-10) {
$ (Este) .spinner ( "valor", 10);
return false;
}
}
});
});
</ Script>
</ Head>
<Cuerpo>
<P>
<Label for = "spinner"> seleccione un valor: </ label>
<Entrada id = "spinner" name = "valor">
</ P>
</ Body>
</ Html>
tiempo
Se extiende desde unas piezas de encargo de los rotadores. Utilice la globalización (globalización) plug-in para analizar y sello de tiempo de salida con el paso de encargo y las opciones de página. Arriba / abajo del cursor para los minutos arriba / abajo, página arriba / abajo para incrementos de horas / decremento.
<! DOCTYPE html>
<Html>
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI rotador (Spinner) - Tiempo </ 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áticas 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, {
Opciones: {
// Segundo paso: 60 * 1000,
// Página H: 60
},
_parse: función (valor) {
si (valor typeof === "cadena") {
Tiene una marca de tiempo // si (número (valor) == valor) {
Ida y vuelta Número (valor);
}
volver Globalize.parseDate + (valor);
}
valor de retorno;
},
_format: función (valor) {
volver Globalize.format (new Date (valor), "t");
}
});
$ (Function () {
$ ( "#spinner") .timespinner ();
$ ( "#culture") .Cambiar (Function () {
var actual = $ ( "#spinner") .timespinner ( "valor");
Globalize.culture ($ (this) .val ());
$ ( "#spinner") .timespinner ( "Valor", en curso);
});
});
</ Script>
</ Head>
<Cuerpo>
<P>
<Label for = "spinner"> rotador Tiempo: </ label>
<Entrada id = "spinner" nombre = valor "spinner" = "20:30">
</ P>
<P>
<Label for = "cultura"> Seleccione un formato para la cultura: </ label>
<Select id = "cultura">
<Option value = "es-ES" selected = "selected"> Inglés </ option>
<Option value = "de-DE"> Alemán </ option>
</ Select>
</ P>
</ Body>
</ Html>