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

15

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

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

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

1. Створення віджета сортування по ціні.

1.1. Створюємо html розмітку.

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

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

Отже між тегами body вставляємо наступний код:

Ціна:

Від:
До:

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

Далі необхідно створити порожній контейнер div в якому у нас буде розташовуватися слайдер. Додамо цей контейнер після закриваючого тега форми:

1.2. Створюємо і підключаємо файл стилів.

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

#price,#price2 {
border:1px solid #074776;
padding:5px;
width:80px;
}
#options {
width:300px;
padding:10px;
border:1px solid #074776;
}
#slider_price {
margin-top:10px;
}

Далі залишилося просто підключити даний файл між тегами head:

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

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

1.3. Завантажуємо і підключаємо бібліотеки jQuery і jQuery UI.

Тепер переходимо до кодування на javascript.

Першим ділом викачуємо бібліотеку jquery і підключаємо до нашого скрипта (нагадаю, що завантажити бібліотеку можна з офіційного сайту http://jquery.com) :

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

Отже, підключаємо бібліотеку:

І тепер, останнє, що нам необхідно підключити — це файл зі стилями для нашої бібліотеки, тому підключаємо і його:

1.4. Кодуємо на javascript.

Після того як всі необхідні бібліотеки підключені, давайте повернемося на офіційний сайт бібліотеки jquery UI. Далі перейдемо в розділ Demos & Documentation, потім натискаємо мишею по віджету — slider. І як Ви бачите, справа в колонці нам представлені для вибору різні варіанти використання віджету, а в центрі показано як буде відображатися на екрані вибраний віджет.

Подивіться на приклад Range slider, як бачите — це і є той слайдер, який ми хочемо реалізувати. Нижче прикладом є посилання View Ѕоигсе, натиснувши на яку ми зможемо подивитися як даний приклад зроблений (тобто переглянути вихідний код прикладу).

Якщо уважно подивитися, то можна побачити, що вихідний код складається з двох частин: перша частина це звичайна html-розмітка, яка у нас уже виконана, а друга — це код на javascript, який нам і потрібно скопіювати і вставити собі в файл.

Тому з вихідного коду копіюємо код укладений теги script. Ось код, який необхідно скопіювати:

$(function() {
$( «#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 ) );
});

Далі вставляємо його у файл з нашим скриптом, але зверніть увагу, що в даному коді необхідно змінити селектори за яким з допомогою jquery вибираються елементи.

Дивіться, спочатку вибирається елемент з ідентифікатором slider-range і до нього застосовується віджет slider. У нашому ж випадку, слайдер буде в блоці з ідентифікатором slider_price, який, як Ви пам’ятаєте, ми створили під формою. Тому змінюємо селектор вибору з #slider-range #slider_price. Далі зверніть увагу, що в прикладі мінімальна і максимальна ціна записуються в одне текстове поле, а нам необхідно що б мінімальна ціна записувалася в перше текстове поле, а максимальна — в друге. Тому, необхідно внести невеликі зміни в код.

Далі я наведу вже виправлений код, який потрібно вставити в наш скрипт (а нижче поясню всі зміни).

$(function() {
$( «#slider_price» ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
//Поле мінімального значення
$( «#price» ).val(ui.values[ 0 ]);
//Поле максимального значення
$(«#price2»).val(ui.values[1]); }
});
//Записуємо значення повзунків в момент завантаження сторінки
//Тобто значення за замовчуванням
$( «#price» ).val($( «#slider_price» ).slider( «values», 0 ));
$(«#price2»).val($(«#slider_price»).slider( «values», 1 ));
});

Як Ви бачите, код складається з двох частин: перша це опис самого слайдера, а друга — це запис у текстові поля значень за замовчуванням.

Отже, спочатку, ми вибираємо блок з ідентифікатором 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).

Перейдемо в браузер і подивимося, що у нас вийшло.

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

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

Якщо додати до властивостей виклику слайдера властивість: orientation: «vertical», то слайдер буде розташовуватися вертикально:

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

Тепер давайте реалізуємо можливість того, що якщо користувач вводить значення ціни безпосередньо в текстове поле, то що б після введення повзунок слайдера пересувався на зазначене в полі значення.

Для текстового поля мінімального значення ця можливість реалізується з допомогою таких рядків коду:

$(‘#price’).change(function() {
var val = $(this).val();
$(‘#slider_price’).slider(«values»,0,val);
});

Тут все просто: спочатку робимо вибірку за ідентифікатором ‘#price’, потім викликаємо обробник події change (він спрацює коли користувач змінить значення тестового поля) і в оброблювачі описуємо функцію, яка отримує з допомогою методу val() значення текстового поля, а потім за допомогою методу слайдера slider(«values»,0,val) змінює значення повзунка (тим самим, пересуваючи повзунок на вказане значення).

Для текстового поля максимального значення все аналогічно:

$(‘#price2’).change(function() {
var val1 = $(this).val();
$(‘#slider_price’).slider(«values»,1,val1);
});

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

Отже, давайте ще раз подивимося на результат нашої роботи, дивіться, як швидко і просто, використовуючи віджет slider, ми з Вами створили дуже зручне сортування по ціні, яка стане в нагоді для будь-якого інтернет-магазину.

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

2. Створення фотогалереї.

2.1. Створюємо html розмітку.

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

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

Як ви бачите з допомогою цього віджета можна реалізувати, як би скроллер якихось об’єктів, наприклад картинок. Можна помістити в кожну комірку по картинці і за допомогою повзунка прокрутки перегортати зображення.

Давайте реалізуємо цей приклад, тобто зробимо маленьку дуже просту галерею зображень. Для цього, що б не втрачати час скопіювати з файлу 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 розмітки:

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

2.2. Пишемо логічну частину фотогалереї.

Далі знову повертаємося до вихідного коду і скопіюємо код розташований між тегами script. Я видалив з нього дві функції, які для нашого прикладу не потрібні, ці функції відповідали за поведінку слайдера при зміні розмірів вікна. Ось такий вигляд має код, який потрібно вставити між тегами head:

$(function() {
//scrollpane parts
var scrollPane = $( «.scroll-pane» ),
scrollContent = $( «.scroll-content» );
//build slider
var scrollbar = $( «.scroll-bar» ).slider({
slide: function( event, ui ) {
if ( scrollContent.width() > scrollPane.width() ) {
scrollContent.css( «margin-left», Math.round(
ui.value / 100 * ( scrollPane.width() — scrollContent.width() )
) + «px» );
//alert(Math.round(
//ui.value / 100 * ( scrollPane.width() — scrollContent.width())));
} else {
scrollContent.css( «margin-left», 0 );
}
}
});
//розраховується ширина повзунка слдайдера в залежності від ширини
//блоку з класом scroll-content
//append icon to handle
var handleHelper = scrollbar.find( «.ui-slider-handle» )
.mousedown(function() {
scrollbar.width( handleHelper.width() );
})
.mouseup(function() {
scrollbar.width( «100%» );
})
.append( «» )
.wrap( «

«).parent();
//change to overflow hidden now that slider handles the scrolling
scrollPane.css( «overflow», «hidden» );
//size scrollbar and handle proportionally distance to scroll
function sizeScrollbar() {
var remainder = scrollContent.width() — scrollPane.width();
var proportion = remainder / scrollContent.width();
var handleSize = scrollPane.width() — ( proportion * scrollPane.width() );
scrollbar.find( «.ui-slider-handle» ).css({
width: handleSize,
«margin-left»: -handleSize / 2
});
handleHelper.width( «» ).width( scrollbar.width() — handleSize );
}
//init scrollbar size
setTimeout( sizeScrollbar, 10 );//safari wants a timeout
});

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

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

#demo-frame > div.demo { padding: 10px !important; }
.scroll-pane { overflow: auto; width: 99%; float:left; }
.scroll-content { width: 1720px; float: left; }
.scroll-content-item { width: 150px; height: 94px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; }
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5 em; }
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%;}
.results img {width:320px;height:200px;}

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

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

Отже, вийшов ось такий от скроллер картинок, тепер необхідно реалізувати можливість, що б при кліці по маленькому зображення, в центральному блоці з’являлася збільшена копія цього зображення. Давайте цим і займемося.

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

$(‘.scroll-content-item img’).each(function () {
$(this).click(function() {
var url = $(this).attr(‘src’);
var path = ‘images/big/’ + url.substring(url.indexOf(‘/’) + 1);
$(‘.results’).html(‘Практичне застосування віджета slider бібліотеки jQuery UI. Слайдер для сайту‘ ).hide();
$(‘.results’).fadeIn(1000);
});
});

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

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

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

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

Як Ви бачите, тепер, якщо клікнути мишею по маленькому зображенню, в центральному блоці з’являється збільшена копія цього зображення (тобто, попередній перегляд).

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

Отже, спочатку як зазвичай код, а потім пояснення:

$(‘.results’).toggle(
//перший клік
function() {
$(‘.results img’).css({
‘z-index’:’100′,
‘position’:’absolute’,
‘border’:’10px solid #ffffff’
});
$(‘.results img’).animate({
‘width’:’800px’,
‘height’:’500px’,
‘marginLeft’:’-240px’,
‘marginTop’:’100px’
});
},
//другий клік
function() {
$(‘.results img’).css({
‘border’:’0′
});
$(‘.results img’).animate({
‘width’:’320px’,
‘height’:’200px’,
‘marginLeft’:’0px’,
‘marginTop’:’0px’
});
});

Першим ділом робимо вибірку блоку з класом results і застосовуємо до нього метод toggle(). Цей метод дозволяє реалізувати свого роду перемикач, тобто в цьому методі ми описуємо дві функції: перша виконається при першому натисканні миші, друга – при другому клацанні миші.

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

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

Отже, переходимо в браузер і подивимося, що у нас вийшло:

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

Ось, що у мене вийшло при кліці по центральному зображенню, відповідно при другому клацанні зображення повертається на місце, і зверніть увагу, що з досить непоганий анімацією.

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

Отже, на цьому урок можна закінчувати, сподіваюся, урок був Вам цікавий, і ви підкреслили для себе багато нового і корисного, навчилися створювати слайдер для сайту. Якщо Вам сподобався даний віджет використовуйте його на свій розсуд, він дуже корисний, і на його основі можна реалізувати багато цікавих речей. А у мене поки все, будуть питання, пишіть – постараємося на них відповісти.

Вдалого Вам кодування і до нових зустрічей!