Панель Управления


Видеокурс: "Javascript+jQuery для начинающих в видеоформате" Проверка времени и определение часового пояса рабочей станции. RU-CENTER. Центр регистрации доменов зоны .RU Сейчас выгодная возможность зарегистрировать домен .РФ в RU-CENTER Информационная безопасность Система интернет-расчетов RUpay Графический редактор ГИМП (GIMP) Зинаида Лукьянова. Видеокурс Фотошоп с нуля. Евгений Попов. Видеокурс HTML + PHP + MySQL. Весь Софт Софтодром "Электрошоп". Поиск электронных товаров. Джава. Ява. Java. Дмитрий Котеров, Алексей Костарев. PHP-5. Наиболее полное руководство. 2-е издание.



Элемент Спиннер (Spinner) плагина UI библиотеки jQuery.
Плагин UI версии 1.9.2 библиотеки jQuery версии 1.8.3 Сделано в kocby.ru Элемент Спиннер (Spinner) плагина UI библиотеки jQuery. Спиннер, или числовой шаговик, виджет, который идеально заточен для управления всех типов числового ввода. Он позволяет пользователям вводить значение напрямую вручную или изменять текущее значение спиннингом с помощью клавиатуры, мышки или колесиков прокрутки. Если Спиннер работает совместно с Глобализатором (Globalize), вы можете даже прокручивать валюты и даты в разных локалях. Спиннер вращает текстовый ввод, добавляет 2 кнопки для увеличения и уменьшения текущего значения, с той же целью можно использовать клавиши управления событиями. Спиннер обращается к Глобализатору (Globalize) для проведения форматирования и парсинга числа.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Spinner :: Спиннер
Описание: Расширяет возможности текстового ввода данных для цифровых значений с помощью кнопок вверх/вниз и клавиш "стрелки" на клавиатуре.
Description: Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.

Пример странички Спиннер Дефолтный (по умолчанию, Default functionality):
можно посмотреть здесь.

Пример странички Спиннер Десятичный (Decimal):
можно посмотреть здесь.

Пример странички Спиннер Валютный (Currency):
можно посмотреть здесь.

Пример странички Спиннер Карта (Map):
можно посмотреть здесь.

Пример странички Спиннер Время (Time):
можно посмотреть здесь.

Пример странички Спиннер Перегруженный (Overflow):
можно посмотреть здесь.




Теория

Тесты по теории можно посмотреть здесь.




Options (Опции)



culture
Type: String
Default: null

Sets the culture to use for parsing and formatting the value. If null, the currently set culture in Globalize is used, see Globalize docs for available cultures. Only relevant if the numberFormat option is set. Requires Globalize to be included.
Устанавливает региональную настройку для использования в парсинге и форматировании значения. Если null (пусто) используется текущая региональная настройка, установленная в Глобализаторе (Globalize), см документацию по Глобализатору (Globalize) со списком доступных региональных настроек. Доступна при условии, если опция numberFormat (формат числа) установлена. Требует, чтобы Глобализатор (Globalize) был подключен.

Code examples: (Примеры кода: )
Initialize the spinner with the culture option specified:
Инициализация Сортируемого с определенной опцией cursor:

$( ".selector" ).spinner({ culture: "fr" });


Get or set the culture option, after initialization:
Можно получить или установить опцию cursor после инициализации:

// getter
var culture = $( ".selector" ).spinner( "option", "culture" );
 
// setter
$( ".selector" ).spinner( "option", "culture", "fr" );



disabled
Type: Boolean
Default: false

Disables the spinner if set to true.
Выключает Спиннер, если опция установлена на значение true (истина).

Code examples: (Примеры кода: )
Initialize the sortable with the disabled option specified:
Инициализация Спиннера с определенной опцией disabled:

$( ".selector" ).spinner({ disabled: true });


Get or set the disabled option, after initialization:
Можно получить или установить опцию disabled после инициализации:

// getter
var disabled = $( ".selector" ).spinner( "option", "disabled" );
 
// setter
$( ".selector" ).spinner( "option", "disabled", true );



icons
Type: Object
Default: { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }


Icons to use for buttons, matching an icon defined by the jQuery UI CSS Framework.
Иконки для показа на кнопках, в соответствии с иконками, определенными в Фрейворке jQuery UI CSS Framework.

• up (string, default: "ui-icon-triangle-1-n")
• down (string, default: "ui-icon-triangle-1-s")

Code examples: (Примеры кода: )
Initialize the spinner with the icons option specified:
Инициализация Кнопки с определенной опцией icons:

$( ".selector" ).spinner({ icons: { down: "custom-down-icon", up: "custom-up-icon" } });


Get or set the icons option, after initialization:
Можно получить или установить опцию icons после инициализации:

// getter
var icons = $( ".selector" ).spinner( "option", "icons" );
 
// setter
$( ".selector" ).spinner( "option", "icons", { down: "custom-down-icon", up: "custom-up-icon" } );



incremental
Type: Boolean or Function()
Default: true

Controls the number of steps taken when holding down a spin button.
Контролирует количество совершаемых шагов при нажатии спиновой кнопки.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean (Двоичная Логика): When set to true, the stepping delta will increase when spun incessantly. When set to false, all steps are equal (as defined by the step option). Когда установлена на значение true (истина), пошаговая дельта будет всегда увеличиваться при нажатии спиновой кнопки. Когда установлена на значение false (ложь), все шаги будут одинаковые (как определено в опции step(шаг)).
• Function (Функция): Receives one parameter: the number of spins that have occurred. Must return the number of steps that should occur for the current spin. Получает один параметр: количество случившихся спинов. Должна вернуть количество шагов, которые произойти для текущего спина.

Code examples: (Примеры кода: )
Initialize the spinner with the incremental option specified:
Инициализация Спиннера с определенной опцией incremental:

$( ".selector" ).spinner({ incremental: false });


Get or set the incremental option, after initialization:
Можно получить или установить опцию incremental после инициализации:

// getter
var incremental = $( ".selector" ).spinner( "option", "incremental" );
 
// setter
$( ".selector" ).spinner( "option", "incremental", false );



max
Type: Number or String
Default: null

The maximum allowed value. The element's max attribute is used if it exists and the option is not explicitly set. If null, there is no maximum enforced.
Максимально допустимое значение. Аттрибут элемента max (максимальный) используется, если таковой существует и опция точно не установлена. Если null (пусто), то нет насильственно определенного максимума. Multiple types supported:
Поддерживаются множественные типы:
• Number (Число): The maximum value. Максимальное значение.
• String (Строка): If Globalize is included, the max option can be passed as a string which will be parsed based on the numberFormat and culture options; otherwise it will fall back to the native parseFloat() method. Если Глобализатор (Globalize) подключен, опция max (максимум) может быть передана как строка, которая будет парсирована на основе опции numberFormat (формат числа) и опции culture (региональная настройка). В противном случае парсинг будет проведен стандартным методом parseFloat().

Code examples: (Примеры кода: )
Initialize the spinner with the max option specified:
Инициализация Спиннер с определенной опцией max:

$( ".selector" ).spinner({ max: 50 });


Get or set the max option, after initialization:
Можно получить или установить опцию max после инициализации:

// getter
var max = $( ".selector" ).spinner( "option", "max" );
 
// setter
$( ".selector" ).spinner( "option", "max", 50 );



min
Type: Number or String
Default: null

The minimum allowed value. The element's min attribute is used if it exists and the option is not explicitly set. If null, there is no minimum enforced.
Минимально допустимое значение. Аттрибут элемента min (минимальный) используется, если таковой существует и опция точно не установлена. Если null (пусто), то нет насильственно определенного минимума. Multiple types supported:
Поддерживаются множественные типы:
• Number (Число): The minimum value. Минимальное значение.
• String (Строка): If Globalize is included, the min option can be passed as a string which will be parsed based on the numberFormat and culture options; otherwise it will fall back to the native parseFloat() method. Если Глобализатор (Globalize) подключен, опция min (минимум) может быть передана как строка, которая будет парсирована на основе опции numberFormat (формат числа) и опции culture (региональная настройка). В противном случае парсинг будет проведен стандартным методом parseFloat().

Code examples: (Примеры кода: )
Initialize the spinner with the min option specified:
Инициализация Спиннер с определенной опцией min:

$( ".selector" ).spinner({ min: 0 });


Get or set the min option, after initialization:
Можно получить или установить опцию min после инициализации:

// getter
var min = $( ".selector" ).spinner( "option", "min" );
 
// setter
$( ".selector" ).spinner( "option", "min", 0 );



numberFormat
Type: String
Default: null

Format of numbers passed to Globalize, if available. Most common are "n" for a decimal number and "C" for a currency value. Also see the culture option.
Формат чисел, передаваемых Глобализатору (Globalize), если это возможно. Наиболее общие значения: "n" для десятичных чисел и "C" для валютных значений. См также опцию culture (региональные настройки).

Code examples: (Примеры кода: )
Initialize the spinner with the numberFormat option specified:
Инициализация Спиннера с определенной опцией numberFormat:

$( ".selector" ).spinner({ numberFormat: "n" });


Get or set the numberFormat option, after initialization:
Можно получить или установить опцию numberFormat после инициализации:

// getter
var numberFormat = $( ".selector" ).spinner( "option", "numberFormat" );
 
// setter
$( ".selector" ).spinner( "option", "numberFormat", "n" );



page
Type: Number
Default: 10

The number of steps to take when paging via the pageUp/pageDown methods.
Число шагов для пейджинга через методы pageUp/pageDown.

Code examples: (Примеры кода: )
Initialize the spinner with the page option specified:
Инициализация Спиннера с определенной опцией page:

$( ".selector" ).spinner({ page: 5 });


Get or set the page option, after initialization:
Можно получить или установить опцию page после инициализации:

// getter
var page = $( ".selector" ).spinner( "option", "page" );
 
// setter
$( ".selector" ).spinner( "option", "page", 5 );



step
Type: Number or String
Default: 1

The size of the step to take when spinning via buttons or via the stepUp()/stepDown() methods. The element's step attribute is used if it exists and the option is not explicitly set.
Размер шага при спиннинге через кнопки или через методы stepUp()/stepDown(). Аттрибут элемента step (шаг) используется, если таковой существует и опция точно не установлена.

Multiple types supported:
Поддерживаются множественные типы:
• Number (Число): The size of the step. Размер шага.
• String (Строка): If Globalize is included, the step option can be passed as a string which will be parsed based on the numberFormat and culture options, otherwise it will fall back to the native parseFloat. Если Глобализатор (Globalize) подключен, опция step (шаг) может быть передана как строка, которая будет парсирована на основе опции numberFormat (формат числа) и опции culture (региональная настройка). В противном случае парсинг будет проведен стандартным методом parseFloat().

Code examples: (Примеры кода: )
Initialize the spinner with the step option specified:
Инициализация Спиннера с определенной опцией step:

$( ".selector" ).spinner({ step: 2 });


Get or set the step option, after initialization:
Можно получить или установить опцию step после инициализации:

// getter
var step = $( ".selector" ).spinner( "option", "step" );
 
// setter
$( ".selector" ).spinner( "option", "step", 2 );



Methods (Методы)



destroy()
Removes the spinner functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.

Полностью удаляет функциональность Спиннера. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):
$( ".selector" ).spinner( "destroy" );



disable()
Disables the spinner.
• This method does not accept any arguments.

Выключает Спиннер.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):
$( ".selector" ).spinner( "disable" );



enable()
Enables the spinner.
• This method does not accept any arguments.

Включает Спиннер.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):
$( ".selector" ).spinner( "enable" );



option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var isDisabled = $( ".selector" ).spinner( "option", "disabled" );



option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current spinner options hash.
• This method does not accept any arguments.

Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений Спиннера.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var options = $( ".selector" ).spinner( "option" );



option( optionName, value )
Sets the value of the spinner option associated with the specified optionName.
Устанавливает значение опции Спиннера, связанное с определенным optionName (именем опции).

• optionName
Type: String
The name of the option to set.
Имя опции для установки.

• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).spinner( "option", "disabled", true );



option( options )
Sets one or more options for the sortable.

Устанавливает одну или более опций для Спиннера.

• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).spinner( "option", { disabled: true } );



pageDown( [pages ] )
Decrements the value by the specified number of pages, as defined by the page option. Without the parameter, a single page is decremented.

Уменьшает значение на определенное количество страниц, как определено в опции page (страница). Без параметра уменьшается на простую страницу.

• pages
Type: Number
Number of pages to decrement, defaults to 1.
Количество страниц для уменьшения, по умолчанию равно 1.

Code examples: (Примеры кода: )
Invoke the pageDown method:
Запуск метода:
$( ".selector" ).spinner( "pageDown" );



pageUp( [pages ] )
Increments the value by the specified number of pages, as defined by the page option. Without the parameter, a single page is incremented.

Увеличивает значение на определенное количество страниц, как определено в опции page (страница). Без параметра увеличивается на простую страницу.

• pages
Type: Number
Number of pages to increment, defaults to 1.
Количество страниц для увеличения, по умолчанию равно 1.

Code examples: (Примеры кода: )
Invoke the pageUp method:
Запуск метода:
$( ".selector" ).spinner( "pageUp", 10 );



stepDown( [steps ] )
Decrements the value by the specified number of steps. Without the parameter, a single step is decremented.

If the resulting value is above the max, below the min, or results in a step mismatch, the value will be adjusted to the closest valid value.

Уменьшает значение на определенное количество шагов. Без параметра уменьшается на простой шаг.

Если полученный результат больше максимума, меньше минимума или шаг заданнеправильно, значение будет адаптировано до ближайшего валидного значения.

• steps
Type: Number
Number of steps to decrement, defaults to 1.
Количество шагов для уменьшения, по умолчанию равно 1.

Code examples: (Примеры кода: )
Invoke the stepDown method:
Запуск метода:
$( ".selector" ).spinner( "stepDown" );



stepUp( [steps ] )
Increments the value by the specified number of steps. Without the parameter, a single step is incremented.

If the resulting value is above the max, below the min, or results in a step mismatch, the value will be adjusted to the closest valid value.

Увеличивает значение на определенное количество шагов. Без параметра увеличивается на простой шаг.

Если полученный результат больше максимума, меньше минимума или шаг заданнеправильно, значение будет адаптировано до ближайшего валидного значения.

• steps
Type: Number
Number of steps to increment, defaults to 1.
Количество шагов для увеличения, по умолчанию равно 1.

Code examples: (Примеры кода: )
Invoke the stepUp method:
Запуск метода:
$( ".selector" ).spinner( "stepUp", 5 );



value()
Returns: Number
Gets the current value as a number. The value is parsed based on the numberFormat and culture options.
• This method does not accept any arguments.

Получает текущее значение, как число. Значение парсируется на основе опций numberFormat (формат числа) culture (региональная настройка).
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var value = $( ".selector" ).spinner( "value" );



value( value )
• value
Type: Number or String
The value to set. If passed as a string, the value is parsed based on the numberFormat and culture options.
Значение для установки. Если передается как строка, значение парсируется на основе опций numberFormat (формат числа) culture (региональная настройка).

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).spinner( "value", 50 );



widget()
Returns a jQuery object containing the generated wrapper.
• This method does not accept any arguments.

Возвращает объект jQuery, содержащий сформированную обертку.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:
var widget = $( ".selector" ).spinner( "widget" );



Events (События)



change( event, ui )
Type: spinchange

Triggered when the value of the spinner has changed and the input is no longer focused.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the spinner with the change callback specified:
$( ".selector" ).spinner({
    change: function( event, ui ) {}
});


Bind an event listener to the spinchange event:
$( ".selector" ).on( "spinchange", function( event, ui ) {} );



create( event, ui )
Type: spincreate

Triggered when the spinner is created.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the spinner with the create callback specified:
$( ".selector" ).spinner({
    create: function( event, ui ) {}
});


Bind an event listener to the spincreate event:
$( ".selector" ).on( "spincreate", function( event, ui ) {} );



spin( event, ui )
Type: spin

Triggered during increment/decrement (to determine direction of spin compare current value with ui.value).

Can be canceled, preventing the value from being updated.

Триггирует в течении увеличения/уменьшения (для определения направления спина сравнивается текущее значение с ui.value).

Может быть прерван, для предотвращения обновления значения.

• event
Type: Event

• ui
Type: Object

◦ value
Type: Number
The new value to be set, unless the event is cancelled.

Code examples: (Примеры кода: )
Initialize the spinner with the spin callback specified:
$( ".selector" ).spinner({
    spin: function( event, ui ) {}
});


Bind an event listener to the spin event:
$( ".selector" ).on( "spin", function( event, ui ) {} );



start( event, ui )
Type: spinstart

Triggered before a spin. Can be canceled, preventing the spin from occurring.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the spinner with the start callback specified:
$( ".selector" ).spinner({
    start: function( event, ui ) {}
});


Bind an event listener to the spinstart event:
$( ".selector" ).on( "spinstart", function( event, ui ) {} );



stop( event, ui )
Type: spinstop

Triggered after a spin.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the spinner with the stop callback specified:
$( ".selector" ).spinner({
    stop: function( event, ui ) {}
});


Bind an event listener to the spinstop event:
$( ".selector" ).on( "spinstop", function( event, ui ) {} );



Overview (Обзор)
Spinner, or number stepper, widget is perfect for handling all kinds of numeric input. It allow users to type a value directly or modify an existing value by spinning with the keyboard, mouse or scrollwheel. When combined with Globalize, you can even spin currencies and dates in a variety of locales.

Spinner wraps a text input, adds two buttons to increment and decrement the current value, along with handling key events for the same purpose. It delegates to Globalize for number formatting and parsing.

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

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



Keyboard interaction (Клавиши Клавиатуры)
• UP: Increment the value by one step.
• DOWN: Decrement the value by one step.
• PAGE UP: Increment the value by one page.
• PAGE DOWN: Decrement the value by one page.


Focus stays in the text field, even after using the mouse to click one of the spin buttons. • UP: Увеличивает значение на один шаг.
• DOWN: Уменьшает значение на один шаг.
• PAGE UP: Увеличивает значение на одну страницу.
• PAGE DOWN: Уменьшает значение на одну страницу.


Фокус остается в текстовом поле, даже после использования мыши для клика одной из кнопок спина.


Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.



Example:



Example: Plain number spinner.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>spinner demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
 
<input id="spinner">
 
<script>
$( "#spinner" ).spinner();
</script>
 
</body>
</html>
Этот пример можно посмотреть здесь.



Примеры Спиннера на этом сайте: Дефолтный, Десятичный, Валютный, Карта, Время, Перегруженный.



Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/post/webmaster/jquery/ui/spinner/
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа




Close and hide in basket :: Закрыть и спрятать в корзину статистическую информацию о посетителях Клуба.
Створки зеркала Клуба Одиноких Сердец.
Красивая девушка блондинка слева Красивая девушка брюнетка справа