Практическое применение виджета slider библиотеки jQuery UI. Слайдер для сайта

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

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

1. Создание виджета сортировки по цене.

1.1. Создаем html разметку.

Для начала, давайте реализуем слайдер, с помощью которого можно задавать диапазон цен в интернет магазине. Для этого создадим текстовый файл с обычной html разметкой (файл price.html) :

Теперь нам необходимо создать форму и два текстовых поля: первое для минимальной цены, второе для максимальной цены. При этом заключим форму в контейнер div с идентификатором id=’options'(для удобства, как бы с имитируем то, что обычно такие текстовые поля находятся в сайдбарах интернет магазинов).

Итак между тегами body вставляем следующий код:

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

Далее необходимо создать пустой контейнер div в котором у нас будет располагаться слайдер. Добавим этот контейнер после закрывающего тега формы:

1.2. Создаем и подключаем файл стилей.

Далее давайте создадим таблицу стилей и немного приукрасим нашу форму. Я создал файл style.css в папке css, с таким содержимым:

Далее осталось просто подключить данный файл между тегами head:

Давайте посмотрим предварительные результаты нашей работы в браузере:

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

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

2. Создание фотогалереи.

2.1. Создаем html разметку.

Теперь давайте посмотрим (на официальном сайте jquery UI раздел Demos&Documentation пункт slider) на еще один очень интересный пример реализации виджета слайдер – это Simple scrollbar.

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

Давайте реализуем этот пример, то есть сделаем маленькую очень простую галерею картинок. Для этого, что бы не терять время скопируем из файла price.html весь код кроме кода расположенного между script и body и сохраним под именем slider.html (вот его код):

Далее, я заготовил папку с изображениями images, в ней 10 изображений маленького размера и 10 этих же изображений, но большого размера, которые имеют такие же имена, но располагаются в папке big. Скопируем папку в корень нашего скрипта.

Теперь откроем исходный код примера реализации Simple scrollbar, давайте начнем его рассматривать снизу. Как Вы видите, внизу у нас идет обычная html разметка. Давайте скопируем этот участок кода (он содержится между тегами body). Затем внесем в него некоторые изменения, а именно добавим стиль style=»width:800px» в блок div с классом class=»scroll-pane», вставим картинки в каждую ячейку будущей галереи, и добавим блок div с классом class=»results», в котором будут отображаться увеличенные изображения (в момент загрузки будет отображено первое изображение).

Итак, в итоге получился вот такой код html разметки:

2.2. Пишем логическую часть фотогалереи.

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

Здесь, конечно, все сложнее, чем в нашем первом примере, но это на первый взгляд. Смотрите, вначале производим выборку по классу $( «.scroll-bar» ) пустого блока div, в котором будет располагаться слайдер (полоса прокрутки). Затем сравниваем по ширине два блока первый с классом scroll-content, второй с классом scroll-pane. Блок с классом scroll-content изначально намного шире блока scroll-pane, так как в нем располагаются изображения и если посмотреть стили этого блока (в исходном коде, мы чуть позже добавим их к скрипту), то можно увидеть, что там выставлена огромная ширина width: 2440px. Поэтому выполнится условие if и при движении ползунка слайдера, наш блок с классом scroll-content будет получать отрицательный левый отступ пропорционально движению ползунка, тем самым смещаясь влево. Далее описывается функция sizeScrollbar(), которая рассчитывает длину ползунка сладера в зависимости от ширины блока с классом scroll-content (тоесть размер ползунка пропорционален контенту который он перемещает — чем больше контент тем меньше ползунок).

И последнее перед просмотром в браузере давайте скопируем из исходного кода стили и вставим в наш файл, только я их немного подкорректировал в соответствии с нашим примером (немного изменил ширину блока с изображениями и добавил стилей для изображений ), вот смотрите:

Теперь давайте перейдем в браузер и посмотрим на результат нашей работы:

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

Вот код, который необходимо добавить, перед, или после, кода слайдера (а ниже я приведу описание его работы):

Для начала сделаем выборку всех изображений в блоке с классом scroll-content-item, затем применим метод each. Этот метод позволяет нам создавать циклы, для последовательно прохода по каждому элементу выборки. Так как изображений у нас десять, а значит и в выборку попадет десять элементов, поэтому с помощью метода each мы можем работать с каждым элементом выборки. Внутри этого метода описываем функцию, которая будет отрабатывать для каждого элемента выборки. Далее для каждого элемента выборки вызываем обработчик события click. Этот обработчик сработает, когда по элементу кликнуть мышью, и как только это произойдет – выполнится функция, которая описана в обработчике. В этой функции мы получаем значение атрибута src, для изображения, с помощью метода attr() (в скобках указываем имя атрибута, значение которого хотим получить). То есть в переменную url запишется строка images/1.jpg (для первой картинки).

Далее формируем переменную path в которой будет хранится путь к изображению большого размера. Делаем это следующим образом: вначале вырезаем имя файла с помощью методов substring() и indexOf(), а затем прибавляем строку ‘images/big/’. И в конце производим выборку блока с классом results, вставляем в этот блок новую картинку (при помощи метода html()) с адресом, записанным в переменной path, далее мгновенно скрываем этот блок (при помощи метода hide()). Затем показываем блок, используя анимацию при помощи метода fadeIn(), со скоростью в 1 секунду(1000 миллисекунд).

Давайте перейдем в браузер и посмотрим:

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

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

Итак, вначале как обычно код, а затем пояснения:

Первым делом производим выборку блока с классом results и применяем к нему метод toggle(). Этот метод позволяет реализовать своего рода переключатель, то есть в этом методе мы описываем две функции: первая выполнится при первом клике мыши, вторая – при втором клике мыши.

Итак, функция для первого клика: производим выборку изображений в блоке с классом results и с помощью метода css() (метод позволяет задать выбранному элементу произвольные css-стили) зададим несколько правил css-стилей, а именно рамку, позицию и свойство z-index то есть вынесем изображение на первый план. Далее к этому блоку применяем метод animate() (данная функция предназначена для создания пользовательской анимации, то есть она принимает параметрами css правила, и если они отличны от существующих правил элемента, то происходит анимированное изменение этих правил, к примеру, если ширина элемента 100 пикселей и мы передаем методу animate() ширину в 200 пикселей то ширина элемента плавно увеличится до 200 пикселей) и передаем новые правила css-стилей, а именно исходные ширину и высоту изображения, а также верхний и левый отступы, чтобы изображение не смещалось в сторону, и при увеличении располагалось по центру.

Далее аналогично описываем функцию для второго клика, только при этом меняем правила css-стилей, которые передаем в методы css() и animate().

Итак, переходим в браузер и посмотрим, что у нас получилось:

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

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

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

Удачного Вам кодирования и до новых встреч!

Комментарии Вконтакте:

Комментарии (4)