JqueryUI — Spinner

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

Следующий пример зависит от Globalize . Вы можете получить файлы Globalize по адресу https://github.com/jquery/globalize . Нажмите на ссылку для выпусков , выберите нужную версию и загрузите файл .zip или tar.gz. Извлеките файлы и скопируйте следующие файлы в папку, где находится ваш пример.

• lib / globalize.js: этот файл содержит код Javascript для работы с локализацией

• lib / globalize.culture.js: этот файл содержит полный набор локалей, с которыми поставляется библиотека Globalize.

Эти файлы также присутствуют во внешней папке вашей библиотеки jquery-ui.

Следующий пример зависит от Globalize . Вы можете получить файлы Globalize по адресу https://github.com/jquery/globalize . Нажмите на ссылку для выпусков , выберите нужную версию и загрузите файл .zip или tar.gz. Извлеките файлы и скопируйте следующие файлы в папку, где находится ваш пример.

lib / globalize.js: этот файл содержит код Javascript для работы с локализацией

lib / globalize.culture.js: этот файл содержит полный набор локалей, с которыми поставляется библиотека Globalize.

Эти файлы также присутствуют во внешней папке вашей библиотеки jquery-ui.

jQueryUI предоставляет метод spinner (), который создает спиннер.

Синтаксис

Метод spinner () можно использовать в двух формах:

• Метод $ (селектор, контекст) .spinner (параметры)

• Метод $ (селектор, контекст) .spinner («действие», params)

Метод $ (селектор, контекст) .spinner (параметры)

Метод $ (селектор, контекст) .spinner («действие», params)

$(selector, context).spinner (options);

$(selector, context).spinner({option1: value1, option2: value2..... });

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

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

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

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

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

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

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

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

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

Этот параметр устанавливает культуру для использования при разборе и форматировании значения. По умолчанию его значение равно нулю, что означает, что используется текущая культура в Globalize. Уместно только если установлена ​​опция numberFormat . Требует, чтобы Globalize был включен.

Синтаксис

Этот параметр, если установлен в true, отключает счетчик. По умолчанию его значение равно false .

Опция — отключена

Этот параметр, если установлен в true, отключает счетчик. По умолчанию его значение равно false .

Синтаксис

Этот параметр устанавливает значки для кнопок, соответствующие значкам, предоставляемым CSS-структурой jQuery UI . По умолчанию его значение равно {down: «ui-icon-triangle-1-s», up: «ui-icon-triangle-1-n»} .

Вариант — иконки

Этот параметр устанавливает значки для кнопок, соответствующие значкам, предоставляемым CSS-структурой jQuery UI . По умолчанию его значение равно {down: «ui-icon-triangle-1-s», up: «ui-icon-triangle-1-n»} .

Синтаксис

Этот параметр контролирует количество шагов, предпринимаемых при удерживании кнопки прокрутки. По умолчанию его значение равно true .

Опция — пошаговая

Этот параметр контролирует количество шагов, предпринимаемых при удерживании кнопки прокрутки. По умолчанию его значение равно true .

Это может быть типа —

Boolean — Если установлено значение false, все шаги равны. При значении true шаговая дельта будет увеличиваться при непрерывном вращении.

Функция — должна возвращать количество шагов, которое должно произойти для текущего вращения.

Синтаксис

Эта опция указывает максимально допустимое значение. По умолчанию его значение равно нулю, что означает, что максимальный уровень не применяется.

Опция — макс

Эта опция указывает максимально допустимое значение. По умолчанию его значение равно нулю, что означает, что максимальный уровень не применяется.

Это может быть типа —

Число — максимальное значение.

String — Если включен параметр Globalize, параметр max можно передать в виде строки, которая будет проанализирована на основе параметров numberFormat и culture

Синтаксис

Эта опция указывает минимально допустимое значение. По умолчанию его значение равно нулю, что означает, что минимальный уровень не применяется.

Вариант — мин

Эта опция указывает минимально допустимое значение. По умолчанию его значение равно нулю, что означает, что минимальный уровень не применяется.

Это может быть типа —

Число — минимальное значение.

String — Если включен параметр Globalize, параметр min может быть передан в виде строки, которая будет проанализирована на основе параметров numberFormat и culture

Синтаксис

Эта опция указывает формат чисел, переданных в Globalize , если доступно. Наиболее распространенными являются «n» для десятичного числа и «C» для значения валюты. По умолчанию его значение равно нулю .

Опция — числоФормат

Эта опция указывает формат чисел, переданных в Globalize , если доступно. Наиболее распространенными являются «n» для десятичного числа и «C» для значения валюты. По умолчанию его значение равно нулю .

Синтаксис

Этот параметр указывает количество шагов, которые необходимо выполнить при поиске с помощью методов pageUp / pageDown. По умолчанию его значение равно 10 .

Вариант — страница

Этот параметр указывает количество шагов, которые необходимо выполнить при поиске с помощью методов pageUp / pageDown. По умолчанию его значение равно 10 .

Синтаксис

Этот параметр указывает размер шага, который необходимо выполнить при вращении с помощью кнопок или методов stepUp () / stepDown () . Атрибут шага элемента используется, если он существует, и опция не установлена ​​явно.

Вариант — шаг

Этот параметр указывает размер шага, который необходимо выполнить при вращении с помощью кнопок или методов stepUp () / stepDown () . Атрибут шага элемента используется, если он существует, и опция не установлена ​​явно.

Это может быть типа —

Число — размер шага.

String — Если включен параметр Globalize, параметр step может быть передан в виде строки, которая будет проанализирована на основе параметров numberFormat и culture , в противном случае она будет возвращена к исходному parseFloat.

Синтаксис

Следующий раздел покажет вам несколько рабочих примеров функциональности виджета Spinner.

Функциональность по умолчанию

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-1 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-1" ).spinner();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-1" value = "0" />
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле spinnerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Использование параметров Min, Max и Step

В следующем примере демонстрируется использование трех параметров min , max и step в виджете счетчика JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-2,#spinner-3 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-2" ).spinner({
               min: -10, 
               max: 10
            });
            $('#spinner-3').spinner({
               step: 100, 
               min: -1000000, 
               max: 1000000
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         Spinner Min, Max value set:
         <input type = "text" id = "spinner-2" value = "0" /><br><br>
         Spinner increments/decrements in step of of 100:
         <input type = "text" id = "spinner-3" value = "0" />
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле spinnerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере вы можете видеть, что в первом счетчике значения max и min установлены равными 10 и -10 соответственно. Следовательно, при пересечении этих значений счетчик перестанет увеличиваться / уменьшаться. Во втором счетчике значение счетчика увеличивается / уменьшается с шагом 100.

Вариант использования иконок

В следующем примере демонстрируется использование значков параметров в виджете счетчика JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-5 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-5" ).spinner({
               icons: {
                  down: "custom-down-icon", up: "custom-up-icon"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-5" value = "0" />
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле spinnerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере, вы можете заметить, что изображения блесны изменены.

Использование культуры, числового формата и параметров страницы

В следующем примере демонстрируется использование трех параметров culture , numberFormat и page в виджете счетчика JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
      
      <script>
         $(function() {
            $( "#spinner-4" ).spinner({
               culture:"de-DE",
               numberFormat:"C",
               step:2,
               page:10
            });
         });
      </script>
   </head>
   
   <body>
      <p>
         <label for = "spinner-4">Amount to donate:</label>
         <input id = "spinner-4" name = "spinner" value = "5">
      </p>
     
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле spinnerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере, вы можете видеть, что счетчик отображает число в формате валюты, так как для параметра numberFormat установлено значение «C», а для культуры установлено значение «de-DE». Здесь мы использовали файлы Globalize из библиотеки jquery-ui.

$(selector, context).spinner ("action", params);;

$(".selector").spinner("destroy");

$(".selector").spinner("disable");

$(".selector").spinner("enable");

var isDisabled = $( ".selector" ).spinner( "option", "disabled" );

var options = $( ".selector" ).spinner( "option" );

$( ".selector" ).spinner( "option", "disabled", true );

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

$(".selector").spinner("pageDown");

$(".selector").spinner("pageUp");

$(".selector").spinner("stepDown");

$(".selector").spinner("stepUp");

var value = $( ".selector" ).spinner( "value" );

$( ".selector" ).spinner( "value", 50 );

$( ".selector" ).spinner( "widget");

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-6 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-6").spinner();
            $('button').button();

            $('#stepUp-2').click(function () {
               $("#spinner-6").spinner("stepUp");
            });

            $('#stepDown-2').click(function () {
               $("#spinner-6").spinner("stepDown");
            });

            $('#pageUp-2').click(function () {
               $("#spinner-6").spinner("pageUp");
            });

            $('#pageDown-2').click(function () {
               $("#spinner-6").spinner("pageDown");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-6" />
      <br/>
      <button id = "stepUp-2">Increment</button>
      <button id = "stepDown-2">Decrement</button>
      <button id = "pageUp-2">Increment Page</button>
      <button id = "pageDown-2">Decrement Page</button>
   </body>
</html>

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-7 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-7").spinner();
            $('button').button();
            $('#stepUp-3').click(function () {
               $("#spinner-7").spinner("enable");
            });
            $('#stepDown-3').click(function () {
               $("#spinner-7").spinner("disable");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-7" />
      <br/>
      <button id = "stepUp-3">Enable</button>
      <button id = "stepDown-3">Disable</button>
   </body>
</html>

$( ".selector" ).spinner({
   change: function( event, ui ) {}
});

$( ".selector" ).spinner({
   create: function( event, ui ) {}
});

$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});

$( ".selector" ).spinner({
   start: function( event, ui ) {}
});

$( ".selector" ).spinner({
   stop: function( event, ui ) {}
});

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-8 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-8" ).spinner({
               spin: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
               },
               change: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
               },
               stop: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-8" value = "0" />
      </div>
      <span id = "result-2"></span>
   </body>
</html>

Виджет счетчика построен с использованием фабрики виджетов и может быть расширен. Чтобы расширить виджеты, мы можем либо переопределить, либо добавить поведение существующих методов. Следующий метод обеспечивает в качестве точки расширения ту же стабильность API, что и методы счетчика. Перечислено в приведенной выше таблице .

Этот метод возвращает строку, которая является HTML. Этот HTML-код можно использовать для кнопок увеличения и уменьшения счетчика. Каждой кнопке должно быть присвоено имя класса кнопки пользовательского интерфейса для работы связанных событий. Этот метод не принимает никаких аргументов.

Точка расширения — _buttonHtml (событие, пользовательский интерфейс)

Этот метод возвращает строку, которая является HTML. Этот HTML-код можно использовать для кнопок увеличения и уменьшения счетчика. Каждой кнопке должно быть присвоено имя класса кнопки пользовательского интерфейса для работы связанных событий. Этот метод не принимает никаких аргументов.

Пример кода

Этот метод определяет HTML-код, используемый для обертывания элемента <input> счетчика. Этот метод не принимает никаких аргументов.

Точка расширения — _uiSpinnerHtml (событие, пользовательский интерфейс)

Этот метод определяет HTML-код, используемый для обертывания элемента <input> счетчика. Этот метод не принимает никаких аргументов.

Пример кода