Ползунок UI

Slider

~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~По умолчанию, ползунок располагается горизонтально и обладает одним перетаскиваемым элементом, который можно перемещать с помощью мыши или клавиш со стрелочками (если ползунок находится в фокусе).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{padding:15px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="slider"~gt~~lt~/div~gt~
  ~lt~script~gt~
    $("#slider").slider();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Настройка значений~lt~/tit~gt~~lt~coment~gt~Чтобы настроить значения на ползунке, нужно использовать свойства min, max (для значений на краях ползунка), step (для минимального шага перемещения ползунка) и value (чтобы установить текущее значение). Обрабатывать изменение положения ползунка можно с помощью обработчиков события slide.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{padding:15px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="slider"~gt~~lt~/div~gt~
  ~lt~p~gt~
    ~lt~label for="amount"~gt~Размер пожертвования (кратный $50):~lt~/label~gt~
    ~lt~input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /~gt~
  ~lt~/p~gt~
  ~lt~script~gt~
    $("#slider").slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Диапазон значений~lt~/tit~gt~
~lt~coment~gt~Чтобы научить ползунок выбирать диапазон значений, нужно установить свойство range в true. А значения указывать в поле values (а не value), помещая в него массив значений.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{padding:15px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="slider-range"~gt~~lt~/div~gt~
  ~lt~p~gt~
    ~lt~label for="amount"~gt~Укажите размах цен:~lt~/label~gt~
    ~lt~input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /~gt~
  ~lt~/p~gt~
  ~lt~script~gt~
    $("#slider-range").slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Односторонний диапазон~lt~/tit~gt~
~lt~coment~gt~Если необходимо указать диапазон, зафиксировав при этом минимальное значение, то в свойстве range нужно указать "min".~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{padding:15px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="slider-range"~gt~~lt~/div~gt~
  ~lt~p~gt~
    ~lt~label for="amount"~gt~Максимальная цена:~lt~/label~gt~
    ~lt~input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /~gt~
  ~lt~/p~gt~
  ~lt~script~gt~
    $("#slider-range").slider({
      range: "min",
      min: 1,
      max: 500,
      value: 37,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "value" ));
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Вертикальный ползунок~lt~/tit~gt~
~lt~coment~gt~Для этого необходимо установить свойство orientation в "vertical".~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{padding:15px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="slider-vertical" style="height:200px;"~gt~~lt~/div~gt~
  ~lt~p~gt~
    ~lt~label for="amount"~gt~Громкость:~lt~/label~gt~
    ~lt~input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /~gt~
  ~lt~/p~gt~
  ~lt~script~gt~
    $("#slider-vertical").slider({
      orientation: "vertical",
      range: "min",
      min: 0,
      max: 100,
      value: 60,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Описание

Свойства

Методы

События

Оформление

Плагин Slider позволяет превращать блочные элементы (обычно div'ы) в элементы управления, которые обычно называют ползунками. Передвигать рукоятки ползунков можно с помощью мыши, а если ползунок находится в фокусе, то и с помощь клавиш со стрелками.

Обработчики событий, происходящие на ползунках, будут получать 2 параметра: стандартный объект события и дополнительный объект (назовем его ui) со следующими полями:

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

ui.handle — DOM-элемент выполняющий роль рукоятки ползунка. Этот элемент создается автоматически, при инициализации плагина (при создании, этому элементу присваивается класс 'ui-slider-handle').

В ползунке может быть любое количество рукояток. Если их больше одной, то вместо поля value нужно использовать values, который будет хранить массив значений (по одному на каждую рукоятку).

↓ Имя свойства :типы значений (значение по умолчанию)

disabled:boolean(false)

Останавливает\возобновляет работу плагина Slider на выбранных элементах.

// ------- Работа со свойством disabled ---------
// в момент установки slider на элемент
$("selector").slider({ disabled: true });
 
//получение значения disabled 
var disabled = $("selector").slider( "option", "disabled" );
//изменение значения disabled
$("selector").slider( "option", "disabled", true );

animate:boolean,string,integer(false)

Определяет, необходима ли анимация плавного перемещения ползунка, когда пользователь кликает мышью в область ползунка вне области рукоятки. Если анимация нужна, то следует задать в этом параметре время перемещения. Это может быть одно из строковых значений: "slow", "normal" или "fast" (соответствуют 600, 400 и 200 миллисекундам). Или непосредственно количеством миллисекунд (например 1000). Если в параметре animate задать значение true, то это будет соответствовать значению "normal".

// ------- Работа со свойством animate ---------
// в момент установки slider на элемент
$("selector").slider({ animate: true });
 
//получение значения animate
var animate = $("selector").slider( "option", "animate" );
//изменение значения animate
$("selector").slider( "option", "animate", true );

max:integer(100)

Соответствует максимальному значению на ползунке.

// ------- Работа со свойством max ---------
// в момент установки slider на элемент
$("selector").slider({ max: 7 });
 
//получение значения max
var max = $("selector").slider( "option", "max" );
//изменение значения max
$("selector").slider( "option", "max", 7 );

min:integer(0)

Соответствует минимальному значению на ползунке.

// ------- Работа со свойством min ---------
// в момент установки slider на элемент
$("selector").slider({ min: 2 });
 
//получение значения min
var min = $("selector").slider( "option", "min" );
//изменение значения min
$("selector").slider( "option", "min", 2 );

orientation:string('horizontal')

Это свойство определяет как будет располагаться ползунок: вертикально или горизонтально (см. пример "Вертикальный ползунок"). Возможные значения 'horizontal' и 'vertical'.

// ------- Работа со свойством orientation ---------
// в момент установки slider на элемент
$("selector").slider({ orientation: 'vertical' });
 
//получение значения orientation
var orientation = $("selector").slider( "option", "orientation" );
//изменение значения orientation
$("selector").slider( "option", "orientation", 'vertical' );

range:boolean,string(false)

Определяет, будет ли окрашен на ползунке диапазон значений. Если это свойство установлено в true, а на ползунке расположены две рукоятки, то часть ползунка между ними будет окрашена (см. пример "Диапазон значений"). Если на ползунке одна рукоятка, то для того, чтобы окрасить область от минимума до ползунка, нужно указать в range значение "min" (см. пример "Односторонний диапазон"). Значение "max" следует указать, чтобы окрасить область от ползунка, до максимума.

// ------- Работа со свойством range ---------
// в момент установки slider на элемент
$("selector").slider({ range: "min" });
 
//получение значения range
var range = $("selector").slider( "option", "range" );
//изменение значения range
$("selector").slider( "option", "range", "min" );

step:integer(1)

Определяет минимальный шаг при перемещении рукоятки ползунка (см. пример "Настройка значений"). Прежде чем задавать этому свойству значение, отличное от 1, убедитесь, что оно кратно величине max-min.

// ------- Работа со свойством step ---------
// в момент установки slider на элемент
$("selector").slider({ step: 20 });
 
//получение значения step
var step = $("selector").slider( "option", "step" );
//изменение значения step
$("selector").slider( "option", "step", 20 );

value:integer(0)

Определяет текущее установленное значение ползунка. Если на ползунке находится более одной рукоятки, value отвечает за значение первой из них. Значение всех рукояток (когда их больше одной) находятся в свойстве values.

// ------- Работа со свойством value ---------
// в момент установки slider на элемент
$("selector").slider({ value: 37 });
 
//получение значения value
var value = $("selector").slider( "option", "value" );
//изменение значения value
$("selector").slider( "option", "value", 37 );

values:array(null)

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

// ------- Работа со свойством values ---------
// в момент установки slider на элемент
$("selector").slider({ values: [1,5] });
 
//получение значения values
var values = $("selector").slider( "option", "values" );
//изменение значения values
$("selector").slider( "option", "values", [1,5] );

↓ Способ вызова

.slider("destroy")

Удаляет всю функциональность плагина slider с выбранных элементов.

.slider("disable")

Останавливает работу плагина slider на выбранных элементах. Для возобновления, необходимо воспользоваться методом .slider("enable").

.slider("enable")

Возобновляет работу плагина slider на выбранных элементах (например, после того, как она была остановлена с помощью .slider("disable")).

.slider("option", optionName, [value])

Этот метод позволяет изменять/получать свойства плагина slider. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .slider("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.

.slider("widget")

Возвращает те из выбранных элементов, к которым был применен плагин slider (поиск осуществляется по классу ui-slider, который автоматически присваивается этим элементам).

.slider("value", [value])

Позволяет изменять/получать текущее значение ползунка. Если на ползунке находится более одной рукоятки, value отвечает за значение первой из них. За значение всех рукояток (когда их больше одной) отвечает метод values.

.slider("values", index, [value])

Позволяет изменять/получать значения всех рукояток на ползунке (обращаясь к их значениям по номеру index). Доступно только в случае, когда на ползунке более одной рукоятки. За значение одной рукоятки отвечает метод value.

↓ Внутреннее имя события :внешнее имя

create:slidercreate

Событие create происходит в момент инициализации slider на элементе.

// обработка события create
$("selector").slider({
   create: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "slidercreate", function(event, ui){ ... });

start:sliderstart

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

// обработка события start
$("selector").slider({
   start: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "sliderstart", function(event, ui){ ... });

slide:slide

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

// обработка события slide
$("selector").slider({
   slide: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "slide", function(event, ui){ ... });

change:sliderchange

Это событие происходит после окончания перетаскивания ползунка или при изменении его значения программно (например с помощью метода .slider("value",[value])). Обработчик этого события будет получать два параметра: event и ui. Используйте event.orginalEvent, чтобы определить, как именно было изменено значение: с помощью мыши, клавиатуры или программно. Чтобы узнать окончательное значение ползунка, используйте ui.value, если на ползунке только одна рукоятка и $(this).slider('values', index), чтобы узнать значение рукоятки под номером index (только если рукояток более одной).

// обработка события change
$("selector").slider({
   change: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "slidechange", function(event, ui){ ... });

stop:sliderstop

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

// обработка события stop
$("selector").slider({
   stop: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "sliderstop", function(event, ui){ ... });

Плагин Slider использует стандартные стили jQueryUI-css для оформления ползунков. Для редактирования оформления рекомендуется использовать специальную ручную настройку на сайте jQuery UI. Для специфичных манипуляций с ползунками, можно воспользоваться информацией о его структуре:

// если применить плагин Slider к обычному div-элементу:
~lt~div~gt~~lt~/div~gt~

// то Slider автоматически внесет следующие изменения:
~lt~div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"~gt~
   ~lt~a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"~gt~~lt~/a~gt~
~lt~/div~gt~

Ползунок UI

Slider

Функции по категориям

Навигация