Министерство по развитию информационных технологий и коммуникаций республики узбекистан нукусский филиал ташкентского университета информационных технологий

1.3. Скачиваем и подключаем библиотеки jQuery и jQuery UI.

Теперь переходим к кодированию на javascript.
Первым делом скачиваем библиотеку jquery и подключаем к нашему скрипту (напомню, что скачать библиотеку можно с официального сайта //jquery.com) : Далее необходимо скачать и подключить библиотеку jquery UI. С помощью этой библиотеки мы и реализуем слайдер для изменения цен. А точнее мы используем стандартный виджет библиотеки jquery UI — slider, который позволяет реализовывать различные слайдеры для сайтов. Напомню, что скачать библиотеку можно на официальном сайте //jqueryui.com, перейдя по ссылке Download. Далее выбрать режим скачивания, то есть либо Вы скачиваете полную версию библиотеки с полным набором виджетов функций и эффектов, либо скачиваете только то, что Вам нужно (галочками отмечаете требуемые компоненты библиотеки). Я предпочитаю лишнего не качать, поэтому для скачивания я выбрал только виджет slider, полный набор эффектов и, конечно же, ядро библиотеки. Далее напомню, что Вы можете перед скачиванием выбрать цветовую схему отображаемых элементов библиотеки, для этого либо выбрать из выпадающего списка конкретный стандартный стиль, либо же можно сгенерировать цветовой стиль самому, перейдя по ссылке design a custom theme.
Итак, подключаем библиотеку:
И теперь, последнее, что нам необходимо подключить — это файл со стилями для нашей библиотеки, поэтому подключаем и его:

1.4. Кодируем на javascript.

После того как все необходимые библиотеки подключены, давайте вернемся на официальный сайт библиотеки jquery UI. Далее перейдем в раздел Demos & Documentation, затем кликаем мышью по виджету — slider. И как Вы видите, справа в колонке нам представлены для выбора различные варианты использования виджета, а в центре показано как будет отображаться на экране выбранный виджет.
Посмотрите на пример Range slider, как видите — это и есть тот слайдер, который мы хотим реализовать. Ниже под примером есть ссылка View Sourcе, нажав на которую мы сможем посмотреть как данный пример сделан (то есть посмотреть исходный код примера).
Если внимательно посмотреть, то можно увидеть, что исходный код состоит из двух частей: первая часть это обычная html разметка, которая у нас уже выполнена, а вторая — это код на javascript, который нам и нужно скопировать и вставить себе в файл.
Поэтому из исходного кода копируем код заключенный в теги script. Вот код, который необходимо скопировать:
Далее вставляем его в файл с нашим скриптом, но обратите внимание, что в данном коде необходимо изменить селекторы по которым с помощью jquery выбираются элементы.
Смотрите, вначале выбирается элемент с идентификатором slider-range и к нему применяется виджет slider. В нашем же случае, слайдер будет в блоке с идентификатором slider_price, который как Вы помните, мы создали под формой. Поэтому изменяем селектор выбора с #slider-range на #slider_price. Далее обратите внимание, что в примере минимальная и максимальная цена записываются в одно текстовое поле, а нам необходимо что бы минимальная цена записывалась в первое текстовое поле, а максимальная — во второе. Поэтому, необходимо внести небольшие изменения в код.
Далее я приведу уже исправленный код, который необходимо вставить в наш скрипт (а ниже поясню все изменения).
Как Вы видите, код состоит из двух частей: первая это описание самого слайдера, а вторая — это запись в текстовые поля значений по умолчанию.
Итак, вначале, мы выбираем блок с идентификатором slider_price и применяем к нему виджет slider, с такими параметрами:
— range: true — если установлено в true, то между минимальным и максимальным значением на слайдере подсвечивается область, тем самым показывает нам, что выбран диапазон значений;
- min: 0 — минимальное значение на слайдере;
- max: 500 — максимальное значение на слайдере;
- values: [ 75, 300 ] — значения по умолчанию, которые будут установлены изначально на слайдере (то есть ползунки будут установлены в значения 75 и 300);
- slide: — в этом параметре можно описать функцию которая выполнится, когда пользователь начнет двигать ползунки. В нашем случае мы описываем функцию, которая считывает значения ползунков и передает их в значение атрибута value текстовых полей минимума и максимума.
Функция работает следующим образом: в начале с помощью jquery производим выборку по идентификатору «#price» текстового поля, затем вызываем метод val() и параметром передаем ему считанное значение с левого (минимального значения) ползунка на слайдере.
Напомню, что метод val(), если вызван без параметров, позволяет получить значение атрибута value выбранного элемента, если же передать ему какое то значение, то мы не получим значение а наоборот запишем это значение в атрибут value.
Считываем значение с ползунка следующим образом: производим выборку по идентификатору «#slider_price» блока div в котором находится слайдер, затем обращаемся к слайдеру и вызываем у него метод values, с индексом (номером) ползунка. Так как нас интересует в данный момент левый ползунок (минимального значения), то указываем его индекс 0.
Для текстового поля максимального значения все действия аналогичны только указываем индекс ползунка 1.
Далее записываем значения ползунков в момент загрузки страницы, для этого производим выборку по идентификатору «#price» поля минимального значения цены, далее вызываем метод val(), и параметром передаем ему значение, считанное с ползунка минимального значения. Это значение можно получить выбрав по идентификатору «#slider_price» блок в котором находится слайдер, затем обратится к его методу «values» (обратите внимание как записан метод — в скобках и в кавычках пишем имя метода, как параметр) и как и раньше передаем индекс (номер) ползунка. Для текстового поля максимального значения цены действия аналогичны.
Как Вы уже поняли метод slider( «values», 0 ) — возвращает значение ползунка с индексом 0, если же передать третьим параметром какое ни буть значение (slider( «values», 0 , 400)), то метод установит значение ползунка в то значение, которое передано третьим параметром (то есть значение ползунка будет 400).
Перейдем в браузер и посмотрим, что у нас получилось.

Как Вы видите, слайдер нормально работает и при перетаскивании ползунков значения текстовых полей изменяется.
Если добавить к свойствам вызова слайдера свойство: orientation: «vertical», то слайдер будет располагаться вертикально:

Теперь давайте реализуем возможность того что если пользователь вводит значение цены непосредственно в текстовое поле, то что бы после ввода ползунок слайдера передвигался на указанное в поле значение.
Для текстового поля минимального значение эта возможность реализуется с помощью в таких строк кода:
Здесь все просто: вначале производим выборку по идентификатору ‘#price’, затем вызываем обработчик события change (он сработает когда пользователь изменит значение тестового поля) и в обработчике описываем функцию, которая получает с помощью метода val() значение текстового поля и затем с помощью метода слайдера slider(«values»,0,val) изменяет значения ползунка (тем самым, передвигая ползунок на указанное значение).
Для текстового поля максимального значения все аналогично:
Теперь давайте проверим в браузере отработку скрипта. Итак все работает нормально, при изменении значений в текстовых полях, ползунки перемещаются на введенное значение.
Итак, давайте еще раз посмотрим на результат нашей работы, смотрите, как быстро и просто, используя виджет slider, мы с Вами создали очень удобную сортировку по цене, которая пригодится для любого интернет магазина.
Хочу еще обратить Ваше внимание на то, что в том месте, где мы с Вами копировали исходный код примера, немножко ниже имеется небольшая документация по данному виджету. Где описаны все свойства и методы данного виджета, поэтому рекомендую Вам посмотреть, может найдете для себя что то полезное, хотя главные свойства и методы мы с Вами рассмотрели.