Виджет Slider

Веб-программирование --- jQuery UI --- Виджет Slider

Виджет Slider позволяет создавать слайдеры из элементов HTML-документа. Для создания слайдеров используется метод slider(), как показано в примере ниже. Слайдеры применяются в тех случаях, когда пользователю необходимо предоставить возможность выбирать значения, лежащие в некотором заданном диапазоне:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <script type="text/javascript">
        $(function() {

            $('#slider').slider();

        });
    </script>
</head>
<body>
    <div id="slider"></div>
</body>
</html>

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

Настройка виджета Slider

Как и в случае других виджетов jQuery UI, для виджета Slider определен ряд свойств, которые можно использовать для настройки его внешнего вида и поведения. Их краткое описание приведено в таблице ниже. В следующих разделах будет показано, как использовать эти свойства для настройки виджета.

Свойства виджета Slider
Свойство	Описание
animate	Значение true разрешает анимацию слайдера после выполнения пользователем щелчка на шкале вне рукоятки. Значение по умолчанию — false
disabled	Значение true соответствует отключенному состоянию слайдера. Значение по умолчанию — false
max	Определяет максимальное значение для слайдера. Значение по умолчанию — 100
min	Определяет минимальное значение для слайдера. Значение по умолчанию — 0
orientation	Определяет ориентацию слайдера (горизонтальную или вертикальную)
range	Используется совместно со свойством values для создания слайдера с несколькими рукоятками
step	Определяет шаг перемещения рукоятки вдоль шкалы между минимальным и максимальным значениями
value	Определяет значение, представляемое слайдером
values	Используется совместно со свойством range для создания слайдера с несколькими рукоятками

Значения min и max не входят в число допустимых. Таким образом, если вы установите min равным 0, a max — равным 100, то пользователь сможет выбирать значения от 1 до 99.

Изменение ориентации слайдера

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

<!DOCTYPE html>
...
    <style type="text/css">
        #hslider, #vslider { margin: 10px}
    </style>
    <script type="text/javascript">
        $(function() {

                $('#hslider').slider({
                value: 35
            });
            
            $('#vslider').slider({
                orientation: "vertical",
                value: 35
            })
            
        });
    </script>
</head>
<body>
    <div id="hslider"></div>
    <div id="vslider"></div>
</body>
</html>

В этом примере создаются два слайдера, для одного из которых свойство orientation задано равным vertical. В документ добавлен элемент style, устанавливающий поля для слайдеров, чтобы они располагались на некотором расстоянии друг от друга. Размером и положением слайдеров (как и любого другого виджета jQuery UI) можно управлять, применяя стиль к базовому элементу (именно поэтому для создания слайдеров лучше всего подходят элементы div, которыми легко манипулировать с помощью стилей CSS).

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

Создание вертикального и горизонтального слайдеров

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

$(function() {

    $('#hslider, #vslider').slider({
        value: 35,
        orientation: "vertical"
    }).filter('#hslider').slider('option', 'orientation', 'horizontal');
    
});

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

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

Анимация слайдера

Свойство animate позволяет задать плавное перемещение рукоятки слайдера из ее текущего положения в точку шкалы, в которой пользователь выполнил щелчок (в отличие от непосредственного перемещения рукоятки с помощью мыши). Можно разрешить анимацию, предусмотренную по умолчанию, установив для свойства animate значение true. Кроме того, можно задать скорость анимации с помощью предустановленных строковых значений fast и slow или путем указания времени (в миллисекундах), в течение которого должна длиться анимация. Соответствующий пример приведен ниже:

$(function() {

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

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

Создание диапазонного слайдера

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

<!DOCTYPE html>
...
    <style type="text/css">
        #slider { margin: 10px}
		span { color:red; }
    </style>
    <script type="text/javascript">
$(function() {

    $('#slider').slider({
        values: [35, 65],
        range: true,
        create: displaySliderValues,
        slide: displaySliderValues
    })
    
    function displaySliderValues() {
        $('#lower').text($('#slider').slider("values", 0));
        $('#upper').text($('#slider').slider("values", 1));
    }
    
});
    </script>
</head>
<body>
    <div id="slider"></div>
    <div>Нижняя граница: <span id="lower">
        </span> Верхняя граница: <span id="upper"></span></div>
</body>
</html>

Чтобы создать диапазонный слайдер, необходимо установить значение свойства range равным true и задать в качестве значения свойства values массив, содержащий начальные значения нижней и верхней границ диапазона. (Когда используется обычный слайдер, применяется свойство value, а когда используется диапазонный слайдер, применяется свойство values.) В данном примере в качестве нижней и верхней границ установлены соответственно значения 35 и 65. Результат представлен на рисунке:

Здесь в сценарий добавлена функция-обработчик для событий create и slide. О событиях, поддерживаемых слайдером, мы еще будем говорить, но сейчас я просто хотел продемонстрировать, как определить позиции рукояток диапазонного слайдера. Для этого используется метод values(), которому передается индекс интересующей вас рукоятки.

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

Использование методов виджета Slider

Для слайдера определен тот же набор базовых методов, что и для любого другого виджета jQuery UI, плюс еще два метода, позволяющие указать значение или диапазон значений, которые должны отображаться. Эти методы приведены в таблице ниже:

Методы виджета Slider
Метод	Описание
slider("destroy")	Возвращает базовый элемент в первоначальное состояние
slider("disable")	Отключает слайдер
slider("enable")	Включает слайдер
slider("option")	Устанавливает одно или несколько значений свойств
slider("value", значение)	Получает и устанавливает значение для обычного слайдера
slider("values", значения)	Получает и устанавливает значения для диапазонного слайдера

Пример использования методов value и values для управления слайдером из программы приведен ниже:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <style type="text/css">
        #slider, #rangeslider, *.inputDiv { margin: 10px}
        label {width: 80px; display: inline-block; margin: 4px}
    </style>
    <script type="text/javascript">
        $(function() {

            $('#slider').slider({
               value: 50,
               create: function() {               
                    $('#slideVal').val($('#slider').slider("value"));
               }
            });
            
            $('#rangeslider').slider({
                values: [35, 65],
                range: true,
                create: function() {
                    $('#rangeMin').val($('#rangeslider').slider("values", 0));
                    $('#rangeMax').val($('#rangeslider').slider("values", 1));
                }
            })
                        
            $('input').change(function(e) {
                switch (this.id) {
                    case "rangeMin":
                    case "rangeMax":
                        var index = (this.id == "rangeMax") ? 1 : 0;
                        $('#rangeslider').slider("values", index, $(this).val())
                        break;
                    case "slideVal":
                        $('#slider').slider("value", $(this).val())
                        break;
                }
            })
        });
    </script>
</head>
<body>
    <div id="rangeslider"></div>
    <div class="inputDiv">
        <label for="rangeMin">Мин. значение: </label><input id="rangeMin" />
        <label for="rangeMax">Макс. значение: </label><input id="rangeMax" />
    </div>
    
    <div id="slider"></div>
    <div class="inputDiv">
        <label for="slideVal">Значение индикатора: </label><input id="slideVal" />
    </div>    
</body>
</html>

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

Здесь к элементам input, выбранным с помощью jQuery, применяется метод change(), в результате чего всякий раз, когда изменяется значение в одном из полей, вызывается указанная функция. Внутри этой функции с помощью оператора switch организуется ветвление по значению атрибута id измененного элемента, и с помощью метода value или values устанавливаются позиции его рукояток.

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

Использование событий виджета Slider

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

События виджета Slider
Событие	Описание
create	Происходит в момент создания слайдера
start	Происходит, когда пользователь начинает перемещать рукоятку слайдера
slide	Происходит при любом движении мыши, приводящем к перемещению слайдера
change	Происходит, когда пользователь перестает перемещать рукоятку слайдера или когда значение слайдера изменяется программным путем
stop	Происходит, когда пользователь перестает перемещать рукоятку слайдера

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

$(function() {

            $('#slider').slider({
                value: 50,
                create: setInputsFromSlider,
                slide: setInputsFromSlider,
                stop: setInputsFromSlider
            })

            function setInputsFromSlider() {
                $('#slideVal').val($('#slider').slider("value"));
            }
            
            $('#rangeslider').slider({
                values: [35, 65],
                range: true,
                create: setInputsFrom2Slider,
                slide: setInputsFrom2Slider,
                stop: setInputsFrom2Slider
            })
			
            function setInputsFrom2Slider() {
                $('#rangeMin').val($('#rangeslider').slider("values", 0));
                $('#rangeMax').val($('#rangeslider').slider("values", 1));
            }
                        
            $('input').change(function(e) {
                switch (this.id) {
                    case "rangeMin":
                    case "rangeMax":
                        var index = (this.id == "rangeMax") ? 1 : 0;
                        $('#rangeslider').slider("values", index, $(this).val())
                        break;
                    case "slideVal":
                        $('#slider').slider("value", $(this).val())
                        break;
                }
            })
});

Чтобы все это могло работать с другими событиями, я выделил необходимые инструкции в отдельные функции (setInputsFromSlider() и setInputsFrom2Slider()) и использовал их для обработки событий create, slide и stop. Теперь рукоятки слайдера перемещаются при вводе новых значений в полях, а значения в полях ввода обновляются при перемещении рукояток. Вид окончательного документа в окне браузера показан на рисунке, а полное представление о том, как работает данный пример, можно получить только в процессе реального взаимодействия со слайдером: