JQuery UI пример - ротатор (Spinner)
Вверх / вниз кнопки со стрелками и обработки ключей, входных значений функций ввода текста усиливается.
Для получения более подробной информации о элементе вращателя см API документации ротатора элемент (Spinner виджетов) .
По умолчанию функция
по умолчанию ротатор.
<!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>
валюта
Этот пример является формой пожертвования, с количеством валютных опционов и ротатора.
<!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>
десятичный
Этот пример является десятичным ротатора. Надбавки 0,01. Код дело с культурными изменениями, будет читать текущее значение селектора при изменении культуры, она сбросит значение, основанное на стиле новой культуры.
<! DOCTYPE HTML>
<HTML>
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI ротатор (Spinner) - Десятичное </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<SCRIPT SRC = "/ статические / JS / jqueryui / ресурсы / Demos / внешние / jquery.mousewheel.js"> </ SCRIPT>
<SCRIPT SRC = "/ статические / JS / jqueryui / ресурсы / Demos / внешние / globalize.js"> </ SCRIPT>
<Script SRC = "/ статические / JS / jqueryui / ресурсы / демки / внешний / globalize.culture.de-DE.js"> </ скрипт>
<Script SRC = "/ статические / JS / jqueryui / ресурсы / демки / внешний / globalize.culture.ja-JP.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#spinner") .spinner ({
шаг: 0,01,
NumberFormat: "п"
});
$ ( "#culture") .Кнопкой (Функция () {
вар ток = $ ( "#spinner") .spinner ( "значение");
Globalize.culture ($ (это) .val ());
$ ( "#spinner") .spinner ( "Value", ток);
});
});
</ Script>
</ Head>
<Body>
<P>
<Ярлык = "вертушка"> десятичного ротатора: </ метка>
<Input ID = "вертушка" имя = "вертушка" значение = "5.06">
</ P>
<P>
<Ярлык = "культура"> Выберите формат для культуры: </ Label>
<Выбрать ID = "культура">
<Значение Option = "EN-RU" выбранной = "выбрано"> Английский </ вариант>
<Option значение = "де-DE"> Немецкий </ вариант>
<Значение Option = "JA-JP"> японский </ вариант>
</ Select>
</ P>
</ Body>
</ HTML>
карта
Google Maps интеграции, используя вертушку для изменения широты и долготы.
<! DOCTYPE HTML>
<HTML>
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI ротатор (Spinner) - Карта </ title>
<Link отн = "таблица стилей" 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 = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<SCRIPT SRC = "/ статические / JS / jqueryui / ресурсы / Demos / внешние / jquery.mousewheel.js"> </ SCRIPT>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
Функция LatLong () {
вернуть новый google.maps.LatLng ($ ( "# LAT") Вэл (), $ ( "# LNG") Вэл () ..);
}
положение функции () {
map.setCenter (LatLong ());
}
$ ( "#lat, #lng") .spinner ({
шаг: .001,
изменить: положение,
Стоп: положение
});
вар карта = новый google.maps.Map ($ ( "# карта") [0], {
зум: 8,
центр: LatLong (),
MapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</ Script>
<Style>
#Map {
ширина: 500px;
высота: 500px;
}
</ Style>
</ Head>
<Body>
<Ярлык = "ш"> широта </ метка>
<Input ID = "LAT" имя = "LAT" значение = "44,797">
<br>
<Ярлык = "LNG"> Долгота </ метка>
<Input ID = имя = значение "LNG" "LNG" = "- 93,278">
<Div ID = "карта"> </ DIV>
</ Body>
</ HTML>
перелив
Переполнение пределы ротатора от -10 до 10. При значении 10 или более, от переполнения до -10, и наоборот.
<! DOCTYPE HTML>
<HTML>
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI ротатор (Spinner) - Переполнение </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<SCRIPT SRC = "/ статические / JS / jqueryui / ресурсы / Demos / внешние / jquery.mousewheel.js"> </ SCRIPT>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#spinner") .spinner ({
спина: функция (событие, щ) {
если (ui.value> 10) {
$ (Это) .spinner ( "значение", -10);
возвращение ложным;
} Иначе, если (ui.value <-10) {
$ (Это) .spinner ( "значение", 10);
возвращение ложным;
}
}
});
});
</ Script>
</ Head>
<Body>
<P>
<Ярлык = "блесны"> выберите значение: </ Label>
<ID = Введите имя "вертушка" = "значение">
</ P>
</ Body>
</ HTML>
время
Он простирается от ротатора пользовательских частей. Использование процесса глобализации (глобализация) плагин для разбора и время вывода штампа с пользовательскими шага и параметры страницы. Вверх / вниз курсор на несколько минут вверх / вниз на страницу вверх / вниз для приращений часов / декремент.
<! DOCTYPE HTML>
<HTML>
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI ротатор (Spinner) - Время </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<SCRIPT SRC = "/ статические / JS / jqueryui / ресурсы / Demos / внешние / jquery.mousewheel.js"> </ SCRIPT>
<SCRIPT SRC = "/ статические / JS / jqueryui / ресурсы / Demos / внешние / globalize.js"> </ SCRIPT>
<Script SRC = "/ статические / JS / jqueryui / ресурсы / демки / внешний / globalize.culture.de-DE.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ .widget ( "Ui.timespinner", $ .ui.spinner, {
Варианты: {
// Второй этап: 60 * 1000,
// H страница: 60
},
_parse: функция (значение) {
если (значение TypeOf === "строка") {
Имеет временную метку, если // (число (значение) == значение) {
возврат (стоимость);
}
возвращать + Globalize.parseDate (значение);
}
возвращаемое значение;
},
_format: функция (значение) {
вернуть Globalize.format (новые Дата (значение), "Т");
}
});
$ (Function () {
$ ( "#spinner") .timespinner ();
$ ( "#culture") .Кнопкой (Функция () {
вар ток = $ ( "#spinner") .timespinner ( "значение");
Globalize.culture ($ (это) .val ());
$ ( "#spinner") .timespinner ( "Value", ток);
});
});
</ Script>
</ Head>
<Body>
<P>
<Ярлык = "блесны"> Время ротатора: </ метка>
<Input ID = "вертушка" имя = "вертушка" значение = "8:30 вечера">
</ P>
<P>
<Ярлык = "культура"> Выберите формат для культуры: </ Label>
<Выбрать ID = "культура">
<Значение Option = "EN-RU" выбранной = "выбрано"> Английский </ вариант>
<Option значение = "де-DE"> Немецкий </ вариант>
</ Select>
</ P>
</ Body>
</ HTML>