JqueryUI - счетчик

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

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

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

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

Эти файлы также находятся во внешней папке вашей библиотеки jquery-ui.

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

Синтаксис

В spinner() метод может использоваться в двух формах -

  • $ (selector, context) .spinner (options) Метод

  • $ (selector, context) .spinner ("action", params) Метод

$ (selector, context) .spinner (options) Метод

Метод spinner (options) объявляет, что элемент HTML и его содержимое должны обрабатываться и управляться как spinner. Параметр options - это объект, который определяет внешний вид и поведение задействованных элементов счетчика.

Синтаксис

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

Вы можете предоставить один или несколько вариантов за раз, используя объект Javascript. Если необходимо предоставить более одного варианта, вы разделите их запятой следующим образом:

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

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом.

Sr. No. Вариант и описание
1 культура

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

Option - culture

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

Syntax

$( ".selector" ).spinner(
   { culture: "fr" }
);
2 отключен

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

Option - disabled

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

Syntax

$( ".selector" ).spinner(
   { disabled: true }
);
3 иконки

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

Option - icons

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

Syntax

$( ".selector" ).spinner(
   { icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);
4 добавочный

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

Option - incremental

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

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

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

  • Function - Это должно вернуть количество шагов, которые должны произойти для текущего вращения.

Syntax

$( ".selector" ).spinner(
   { incremental: false }
);
5 Максимум

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

Option - max

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

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

  • Number - Максимальное значение.

  • String- Если Globalize включен, максимальный параметр может быть передан как строка , которая будет анализироваться на основе NumberFormat и культуры вариантов

Syntax

$( ".selector" ).spinner(
   { max: 50 }
);
6 мин

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

Option - min

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

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

  • Number - Минимальное значение.

  • String- Если Globalize включен, опция мин может быть передана в виде строки , которая будет анализироваться на основе NumberFormat и культуру вариантов

    .

Syntax

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

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

Option - numberFormat

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

Syntax

$( ".selector" ).spinner(
   { numberFormat: "n" }
);
8 страница

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

Option - page

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

Syntax

$( ".selector" ).spinner(
   { page: 5 }
);
9 шаг

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

Option - step

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

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

  • Number - Размер шага.

  • String- Если Globalize включен, опция шага может быть передана в виде строки , которая будет анализироваться на основе NumberFormat и культуру вариантов, в противном случае он будет падать обратно на родную parseFloat.

    • Syntax

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

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

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

В следующем примере демонстрируется простой пример функциональности виджета счетчика без передачи параметров в 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 и шаг в виджете счетчика 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, вы также должны увидеть следующий вывод. Теперь вы можете поиграть с результатом -

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

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

В следующем примере демонстрируется использование опции icons в виджете счетчика 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, вы также должны увидеть следующий вывод. Теперь вы можете поиграть с результатом -

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

Использование языка и региональных параметров, numberFormat и параметров страницы

В следующем примере демонстрируется использование трех вариантов. 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) Метод

Метод spinner ("action", params) может выполнять действие с элементами счетчика, например включать / отключать счетчик. Действие указывается в виде строки в первом аргументе (например, «отключить» отключает счетчик). Ознакомьтесь с действиями, которые можно передать, в следующей таблице.

Синтаксис

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

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

Sr. No. Действие и описание
1 уничтожить

Это действие полностью уничтожает функциональность счетчика элемента. Элементы возвращаются в свое состояние до инициализации. Этот метод не принимает никаких аргументов.

Action - destroy

Это действие полностью уничтожает функциональность счетчика элемента. Элементы возвращаются в свое состояние до инициализации. Этот метод не принимает никаких аргументов.

Syntax

$(".selector").spinner("destroy");
2 отключить

Это действие отключает функцию счетчика. Этот метод не принимает никаких аргументов.

Action - disable

Это действие отключает функцию счетчика. Этот метод не принимает никаких аргументов.

Syntax

$(".selector").spinner("disable");
3 включить

Это действие включает функцию счетчика. Этот метод не принимает никаких аргументов.

Action - enable

Это действие включает функцию счетчика. Этот метод не принимает никаких аргументов.

Syntax

$(".selector").spinner("enable");
4 option (optionName)

Это действие получает значение, связанное в настоящее время с указанным optionName . Где optionName - имя получаемой опции.

Action - option( optionName )

Это действие получает значение, связанное в настоящее время с указанным optionName . Где optionName - имя получаемой опции.

Syntax

var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
5 вариант

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш параметров счетчика. Этот метод не принимает никаких аргументов.

Action - option

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш параметров счетчика. Этот метод не принимает никаких аргументов.

Syntax

var options = $( ".selector" ).spinner( "option" );
6 option (optionName, значение)

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

Action - optionName

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

Syntax

$( ".selector" ).spinner( "option", "disabled", true );
7 вариант (варианты)

Это действие устанавливает один или несколько параметров для счетчика.

Action - option( options )

Это действие устанавливает один или несколько параметров для счетчика.

Syntax

$(".selector").spinner("option", { disabled: true });
8 pageDown ([страницы])

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

Action - pageDown( [pages ] )

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

Syntax

$(".selector").spinner("pageDown");
9 pageUp ([страницы])

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

Action - pageUp( [pages ] )

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

Syntax

$(".selector").spinner("pageUp");
10 stepDown ([шаги])

Это действие уменьшает значение на указанное количество шагов.

Action - stepDown( [steps ] )

Это действие уменьшает значение на указанное количество шагов. Вызов stepDown () приведет к запуску событий запуска, вращения и остановки .

Syntax

$(".selector").spinner("stepDown");
11 stepUp ([шаги])

Это действие увеличивает значение на указанное количество шагов.

Action - stepUp( [steps ] )

Это действие увеличивает значение на указанное количество шагов. Вызов stepUp () приведет к срабатыванию событий запуска, вращения и остановки .

Syntax

$(".selector").spinner("stepUp");
12 значение

Это действие получает текущее значение в виде числа. Значение анализируется на основе параметров numberFormat и языка и региональных параметров. Этот метод не принимает никаких аргументов.

Action - value

Это действие получает текущее значение в виде числа. Значение анализируется на основе параметров numberFormat и языка и региональных параметров. Этот метод не принимает никаких аргументов.

Syntax

var value = $( ".selector" ).spinner( "value" );
13 значение (значение)

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

Action - value( value )

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

Syntax

$( ".selector" ).spinner( "value", 50 );
14 виджет

Это действие возвращает элемент виджета счетчика; тот, который аннотирован именем класса ui-spinner .

Action - widget

Это действие возвращает элемент виджета счетчика; тот, который аннотирован именем класса ui-spinner .

Syntax

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

Следующие примеры демонстрируют, как использовать действия, указанные в таблице выше.

Использование действий stepUp, stepDown, pageUp и pageDown

В следующем примере демонстрируется использование методов stepUp, stepDown, pageUp и pageDown .

<!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>

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

В приведенном выше примере используйте соответствующие кнопки для увеличения / уменьшения счетчика.

Использование действия разрешает и запрещает

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

<!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>

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

В приведенном выше примере используйте кнопки Включить / Отключить, чтобы включить или отключить счетчик.

Управление событиями на Spinner Elements

В дополнение к методу spinner (options), который мы видели в предыдущих разделах, JqueryUI предоставляет методы событий, которые запускаются для определенного события. Эти методы событий перечислены ниже -

Sr. No. Метод и описание события
1 изменить (событие, пользовательский интерфейс)

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

Event - change(event, ui)

Это событие запускается, когда значение счетчика изменилось и ввод больше не сфокусирован. Где event имеет тип Event , а ui имеет тип Object .

Syntax

$( ".selector" ).spinner({
   change: function( event, ui ) {}
});
2 создать (событие, пользовательский интерфейс)

Это событие запускается при создании счетчика.

Event - create(event, ui)

Это событие запускается при создании счетчика. Где event имеет тип Event , а ui имеет тип Object .

Syntax

$( ".selector" ).spinner({
   create: function( event, ui ) {}
});
3 spin (событие, пользовательский интерфейс)

Это событие запускается во время увеличения / уменьшения.

Event - spin(event, ui)

Это событие запускается во время увеличения / уменьшения. Где event имеет тип Event , а ui имеет тип Object .

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

Syntax

$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});
4 начало (событие, пользовательский интерфейс)

Это событие запускается перед вращением. Можно отменить, предотвращая вращение.

Event - start(event, ui)

Это событие запускается перед вращением. Можно отменить, предотвращая вращение. Где event имеет тип Event , а ui имеет тип Object .

Syntax

$( ".selector" ).spinner({
   start: function( event, ui ) {}
});
5 стоп (событие, пользовательский интерфейс)

Это событие запускается после вращения.

Event - stop(event, ui)

Это событие запускается после вращения. Где event имеет тип Event , а ui имеет тип Object .

Syntax

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

пример

В следующем примере демонстрируется использование метода события в виджетах счетчика. Этот пример демонстрирует использование событий spin , change и stop .

<!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>

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

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

Точки расширения

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

Sr. No. Метод и описание
1 _buttonHtml (событие)

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

Extension Point - _buttonHtml(event, ui)

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

Code Example

_buttonHtml: function() {
  return "" +
    "" +
    "";
}
2 _uiSpinnerHtml (событие)

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

Extension Point - _uiSpinnerHtml(event, ui)

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

Code Example

_uiSpinnerHtml: function() {
  return "
            ";
}
Фабрика виджетов пользовательского интерфейса jQuery - это расширяемая база, на которой построены все виджеты пользовательского интерфейса jQuery. Использование фабрики виджетов для создания подключаемого модуля обеспечивает удобство управления состоянием, а также соглашения для общих задач, таких как предоставление методов подключаемого модуля и изменение параметров после создания экземпляра.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved