JQuery UI API - член ротатор (Spinner Widget)

Опыт работы : Jquery UI API - компоненты слайдер (Slider Widget)

Далее: Jquery UI API - лепестковый элемент (Вкладки Виджет)

категория

использование

Описание: вверх / вниз кнопки со стрелками и клавишу обработки, входного значения функции ввода текста усиливается.

Новая версия: 1.9

Вертушка (Spinner), или контролировать количество шагов (число шагового виджета), используется для обработки различных цифровых входов идеальный контроль. Это позволяет пользователю ввести значение напрямую, или повернуть, чтобы изменить существующее значение с помощью клавиатуры, колесом мыши. В сочетании с глобализацией (Globalize), вы можете даже повернуть валюту для отображения и даты в разных регионах.

Вертушка (Spinner) с помощью двух кнопок для ввода текста покрытия для увеличения и уменьшения текущего значения. Вертушка добавляет ключевые события, так что вы можете использовать клавиатуру для выполнения той же увеличивающие и уменьшающие. Вертушка представитель глобализации (Globalize) цифровой формат и разрешение.

взаимодействие клавиатуры

UP: увеличить значение на один шаг.
ВНИЗ: уменьшить значение шага.
PAGE UP: для увеличения значения.
PAGE DOWN: для уменьшения значения.

Нажмите на кнопку вращения с помощью мыши, фокус остается в текстовом поле.

Когда ротатор не читается ( <input readonly> ), пользователь может ввести значение, которое может привести к недопустимое значение (меньше , чем минимум, больше , чем максимум, увеличения или уменьшения рассогласования, нечисловая вход). Когда увеличение или уменьшение, либо программно , либо путем вращающейся кнопки, значение будет вынужден допустимое значение (Для получения дополнительной информации, пожалуйста , см stepUp() и stepDown() будет описано ниже.

Тематизация

член ротатор (Spinner Widget) с помощью рамки JQuery UI CSS , чтобы определить внешний вид и его стиль. Если вам необходимо использовать указанный кок стиль, вы можете использовать следующее имя класса CSS:

ui-spinner : ротатора внешнего контейнера.
- ui-spinner-input : член ротатора (Spinner Widget) конкретизируется <input> элементов.
- ui-spinner-button : ротатор используется для увеличения или уменьшения значения кнопки управления. застегивать будет дополнительно снабжена ui-spinner-up , вниз, класс кнопки с дополнительным ui-spinner-down , класса.

полагаться

Ядро пользовательского интерфейса (UI ядра)
Библиотеки компонентов (Widget Factory)
Кнопка компонента (кнопка Widget)
Глобализация (Globalize) (внешний, по желанию, в сочетании с culture и numberFormat при использовании с опциями)

дополнительная информация

Часть требует некоторой функциональной CSS, в противном случае она не будет работать. Если вы создаете собственную тему, используйте виджет указанный файл CSS в качестве отправной точки.
Компоненты , чтобы программно манипулировать значением элемента, так что , когда значение элемента изменяется не вызывают нативные change события.
Он не поддерживает <input type="number"> Создать селектор, потому что это вызовет конфликт с местным ротатора UI.

примеров

Общий цифровой селектор.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> член ротатор (Spinner Widget) Demo </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.10.2.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
</ Head>
<Body>
 
<Input ID = "вертушка">
 
<Script>
$ ( "#spinner") .spinner ();
</ Script>
 
</ Body>
</ HTML>

Опыт работы : Jquery UI API - компоненты слайдер (Slider Widget)

Далее: Jquery UI API - лепестковый элемент (Вкладки Виджет)

jQuery UI курс

jQuery UI тема

jQuery UI Библиотека компонентов

jQuery UI справочное руководство

jQuery UI примеров