jQuery UI exemplo - rotador (Spinner)
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) .
A função padrão
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>
moeda
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>
decimal
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>
mapa
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 () ..);
}
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>
transbordamento
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>
tempo
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>