JqueryUI — Слайдер

Метод $ (селектор, контекст) .slider (опции)

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

Синтаксис

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

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

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

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

$( ".selector" ).slider(
   { animate: "fast" }
);

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

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

$( ".selector" ).slider(
   { min: 10 }
);

$( ".selector" ).slider(
   { "option", "orientation" }
);

$( ".selector" ).slider(
   { range: true }
);

$( ".selector" ).slider(
   { step: 5 }
);

$( ".selector" ).slider(
   { value: 10 }
);

$( ".selector" ).slider(
   { values: [ 10, 25 ] }
);

Этот параметр, если задано значение true , создает анимированный эффект, когда пользователи щелкают непосредственно по оси. По умолчанию его значение равно false .

Вариант — одушевленный

Этот параметр, если задано значение true , создает анимированный эффект, когда пользователи щелкают непосредственно по оси. По умолчанию его значение равно false .

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

Boolean — Когда установлено значение true , дескриптор будет анимироваться с продолжительностью по умолчанию.

Строка —

Номер —

Синтаксис

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

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

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

Синтаксис

Этот параметр указывает верхнее значение диапазона, которого может достичь ползунок — значение, представленное, когда ручка перемещается в крайнее правое положение (для горизонтальных ползунков) или на верхнее (для вертикальных ползунков). По умолчанию его значение равно 100 .

Опция — макс

Этот параметр указывает верхнее значение диапазона, которого может достичь ползунок — значение, представленное, когда ручка перемещается в крайнее правое положение (для горизонтальных ползунков) или на верхнее (для вертикальных ползунков). По умолчанию его значение равно 100 .

Синтаксис

Этот параметр указывает нижнее значение диапазона, которого может достичь ползунок — значение, представленное, когда ручка перемещается в крайнее левое положение (для горизонтальных ползунков) или внизу (для вертикальных ползунков). По умолчанию его значение равно 0 .

Вариант — мин

Этот параметр указывает нижнее значение диапазона, которого может достичь ползунок — значение, представленное, когда ручка перемещается в крайнее левое положение (для горизонтальных ползунков) или внизу (для вертикальных ползунков). По умолчанию его значение равно 0 .

Синтаксис

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

Опция — ориентация

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

Синтаксис

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

Опция — ассортимент

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

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

Boolean — Если указано значение true , а ползунок имеет ровно две ручки, между дескрипторами создается элемент, который можно стилизовать.

Строка —

Синтаксис

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

Вариант — шаг

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

Синтаксис

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

Опция — значение

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

Синтаксис

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

Опция — значения

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

Синтаксис

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

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider 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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-1" ).slider();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-1"></div>
   </body>
</html>

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

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

Использование значения, анимации и ориентации

В следующем примере демонстрируется использование трех опций (a) value (b) animate и, (c) ориентация в функции слайдера JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider 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>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-2" ).slider({
               value: 60,
               animate:"slow",
               orientation: "horizontal"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-2"></div>
   </body>
</html>

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

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

Использование диапазона, минимума, максимума и значений

В следующем примере демонстрируется использование трех параметров (a) range, (b) min , (c) max и (d) значений в функции слайдера JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider 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>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-3" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               slide: function( event, ui ) {
                  $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
            });
            $( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
               " - $" + $( "#slider-3" ).slider( "values", 1 ) );
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>
         <label for = "price">Price range:</label>
         <input type = "text" id = "price" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-3"></div>
   </body>
</html>

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

В приведенном выше примере мы установили для параметра range значение true, чтобы захватить диапазон значений двумя ручками перетаскивания. Пространство между маркерами заполнено другим цветом фона, чтобы указать, что эти значения выбраны.

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

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

Синтаксис

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

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

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

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

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

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

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

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

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

$( ".selector" ).slider("value");

$( ".selector" ).slider( "value", 55 );

var values = $( ".selector" ).slider( "values" );

var value = $( ".selector" ).slider( "values", 0 );

$( ".selector" ).slider( "values", 0, 55 );

$( ".selector" ).slider( "values", [ 55, 105 ] );

var widget = $( ".selector" ).slider( "widget" );

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

Действие — уничтожить

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

Синтаксис

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

Действие — отключить

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

Синтаксис

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

Действие — включить

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

Синтаксис

Это действие возвращает значение указанного параметра param. Эта опция соответствует одной из тех, которые используются с ползунком (опции) . Где optionName — имя опции, которую нужно получить.

Действие — опция (optionName)

Это действие возвращает значение указанного параметра param. Эта опция соответствует одной из тех, которые используются с ползунком (опции) . Где optionName — имя опции, которую нужно получить.

Синтаксис

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

Действие — опция ()

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

Синтаксис

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

Действие — опция (optionName, value)

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

Синтаксис

Это действие устанавливает один или несколько параметров для ползунка. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для ползунка. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Синтаксис

Это действие возвращает текущее значение options.value (ползунок) . Используйте только если слайдер уникален (если нет, используйте слайдер («значения»)) . Эта подпись не принимает никаких аргументов.

Действие — значение

Это действие возвращает текущее значение options.value (индикатор) . Используйте только если индикатор уникален (если нет, используйте ползунок («значения»)) . Эта подпись не принимает никаких аргументов.

Синтаксис

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

Действие — значение (значение)

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

Синтаксис

Это действие извлекает текущее значение options.values (значение ползунков в массиве). Эта подпись не принимает никаких аргументов.

Действие — ценности

Это действие извлекает текущее значение options.values (значение ползунков в массиве). Эта подпись не принимает никаких аргументов.

Синтаксис

Это действие получает значение для указанного дескриптора. Где index имеет тип Integer и является индексом дескриптора, начинающимся с нуля.

Действие — значения (индекс)

Это действие получает значение для указанного дескриптора. Где index имеет тип Integer и является индексом дескриптора, начинающимся с нуля.

Синтаксис

Это действие устанавливает значение для указанного дескриптора. Где index — это индекс маркера, начинающийся с нуля, а value — значение, которое нужно установить.

Действие — значения (индекс, значение)

Это действие устанавливает значение для указанного дескриптора. Где index — это индекс маркера, начинающийся с нуля, а value — значение, которое нужно установить.

Синтаксис

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

Действие — ценности (значения)

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

Синтаксис

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

Действие — виджет

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

Синтаксис

пример

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider 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>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-4" ).slider({
               orientation:"vertical"	
            });
            $( "#slider-4" ).slider('disable');
            $( "#slider-5" ).slider({
               orientation:"vertical",
               value:50,
               slide: function( event, ui ) {
                  $( "#minval" ).val( ui.value );
               }	
            });
            $( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-4"></div>
      <p>
         <label for = "minval">Minumum value:</label>
         <input type = "text" id = "minval" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-5"></div>
   </body>
</html>

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

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

Управление событиями на элементах слайдера

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

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

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

$( ".selector" ).slider({
   slide: function( event, ui ) {}
});

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

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

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

Событие — изменить (событие, пользовательский интерфейс)

Это событие вызывает изменение значения дескриптора, либо через действие пользователя, либо программно. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

handle — объект jQuery, представляющий дескриптор, который был изменен.

значение — текущее значение ползунка.

Синтаксис

Это событие срабатывает при создании слайдера.

Событие — создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании слайдера. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

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

Событие — слайд (событие, пользовательский интерфейс)

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

handle — объект jQuery, представляющий перемещаемый дескриптор.

value — значение, к которому будет перемещен дескриптор, если событие не отменено.

values — Массив текущих значений ползунка с несколькими ручками.

Синтаксис

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

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

Это событие срабатывает, когда пользователь начинает скольжение. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

handle — объект jQuery, представляющий перемещаемый дескриптор.

значение — текущее значение ползунка.

Синтаксис

Это событие срабатывает, когда слайд останавливается.

Событие — остановка (событие, интерфейс)

Это событие срабатывает, когда слайд останавливается. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

handle — объект jQuery, представляющий дескриптор, который был перемещен.

значение — текущее значение ползунка.

Синтаксис

пример

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider 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>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-6" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               start: function( event, ui ) {
                  $( "#startvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               stop: function( event, ui ) {
                  $( "#stopvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               change: function( event, ui ) {
                  $( "#changevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               slide: function( event, ui ) {
                  $( "#slidevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-6"></div>
      <p>
         <label for = "startvalue">Start:</label>
         <input type = "text" id = "startvalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "stopvalue">Stop:</label>
         <input type = "text" id = "stopvalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "changevalue">Change:</label>
         <input type = "text" id = "changevalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "slidevalue">Slide:</label>
         <input type = "text" id = "slidevalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
   </body>
</html>

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