Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

19

Від автора: При створенні сайтів дуже часто необхідно виводити різну інформацію у вигляді випадаючого списку, утвореного за допомогою тегів select. Тому в даному уроці ми з Вами розглянемо віджет Selectmenu бібліотеки JQuery UI, за допомогою якого дуже швидко і легко можна змінити стандартний вигляд спадних списків.

Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги selectВіджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

Установка бібліотек

Для сьогоднішнього уроку ми будемо використовувати наступний сайт.

Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

В шапці даного сайту є випадаючий список з категорій. Його ми і будемо міняти в даному уроці.

Першим ділом перейдемо на сайт http://jquery.com і скачаємо бібліотеку jquery. Потім переходимо на офіційний сайт http://jqueryui.com бібліотеки JQuery UI, далі на вкладку Download і викачуємо дану бібліотеку.

Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

За необхідності можна створити власну колірну схему для даної бібліотеки, перейшовши за посиланням design a custom theme. Далі підключаємо викачані бібліотеки:

Файл script.js — це порожній файл, у якому ми будемо писати сценарії на мові JavaScript. Також необхідно підключити стилі бібліотеки JQuery UI:

Робота з віджетом Selectmenu

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

$(«#menu»).selectmenu();

Тепер давайте перейдемо в браузер і подивимося, як змінився зовнішній вигляд випадаючого списку:

Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

Як ви бачите випадаючий список виглядає як звичайне меню. Тепер давайте розглянемо налаштування цього віджета. Як налаштувань ми звертаємося до відповідним властивостям віджета і встановлюємо певні їх значення. Звернення до властивостей здійснюється наступним чином:

$(«#menu»).selectmenu({ appendTo:».header»,});

appendTo в цю властивість ми можемо передати селектор блоку в якому будуть розташовуватися тимчасові елементи віджета.

disabled — якщо дана властивість передати значення True, то віджет буде відключений і вибрати одне з його значень буде не можливо.

Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

Властивість icons надає можливість задати клас для відображення кнопки віджета (праве невелике зображення показує, що випадаюче меню):

$(«#menu»).selectmenu({ icons:{ button:»ui-icon-circle-minus» } });

На екрані ми побачимо наступне:

Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

Для позиціонування випадаючого блоку застосовується властивість position:

$(«#menu»).selectmenu({
position: {
my:»left+10 top»,
at:»left top+20″
},
});

Властивості position встановлюємо значенням об’єкт з наступними властивостями: my — властивість, що визначає точку на позиционируемом елементі, щодо якої буде відбуватися вирівнювання. Задається рядком формату «по_горизонтали по_вертикали», можливі значення «right,center,left,bottom,center,op». at – визначає точку на елементі, щодо якого буде позиціонувати елемент.

Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

Властивість width визначає ширину віджета:

$(«#menu»).selectmenu({ width:500 });

Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

Тепер давайте розглянемо методи віджета. Методи викликаються після ініціалізації віджета і виглядають наступним празом:

close – якщо передати значення True закриє відкритий випадаючий блок;

destroy – руйнує функціонал віджета;

disable – відключає віджет(аналог властивості disabled);

enable – включає в роботу віджет;

instance – повертає об’єкт віджета;

menuWidget – повертає об’єкт блоку з контентом випадаючого списку;

open – відкриває закритий віджет;

option – дозволяє вважати або встановити нове значення властивостям;

refresh – оновлює вміст віджета. Корисний метод, якщо Ви програмно додаєте в віджет нові елементи списку.

widget – повертає об’єкт віджета.

Події

У цього віджета, як і у інших елементів бібліотеки JQuery UI є свої певні події. Описуючи які, ми описуємо функцію, яка буде викликана при спрацьовуванні події.

change – спрацьовує при зміні стані віджета;

close – спрацьовує при закритті віджета;

create – спрацьовує при ініціалізації віджета;

focus – спрацьовує при отриманні фокусу віджетом;

open – спрацьовує при відкритті випадаючого меню віджета;

select – спрацьовує при виборі одного з елементів віджета.

Давайте розглянемо більш докладно подія change. При цьому, напишемо невеликий скрипт, який при виборі нової категорії в випадаючому меню, яке буде відображатися на головній сторінці сайту — статті цієї категорії. Для цього додамо наступний код:

$(«#menu»).selectmenu({
change:function(event,ui) {
if(ui.item.value) {
$.ajax({
url:»index.php»,
type:»POST»,
data:»cat_id=» + ui.item.value,
dataType:»json»,
success:function(html) {
if(html) {
var data = $(«.main_text»);
data.empty();
for(var i = 0; html.length > i; i++) {
data.append(«

«+ html.title +»

«+ html.discription+»

«);
}
}
}
});
}
}
});

Як Ви бачите, тут ми описуємо функцію, яку буде виконано, при зміні стану віджета. Дана функція відправляє запит на файл index.php, використовуючи AJAX, і передаючи при цьому ідентифікатор категорії, статті якої потрібно відобразити на екрані. Зверніть увагу, як можна отримати дані атрибута value тега option:

ui.item.value

Далі, якщо запит був успішний, очищаємо блок з контентом і вставляємо дані в нього. Хотів би відзначити, що дані надходять у форматі рядка JSON, яка автоматично конвертується в об’єкт. Це те, що стосувалося коду JavaScript, у файлі index.php ми додамо наступний код, який обробляє передані дані:

if($_POST[‘cat_id’]) {
$result = get_statti($_POST[‘cat_id’]);
echo json_encode($result);
exit();
}

Як Ви бачите, якщо приходять дані за допомогою методу РОЅТ – викликається функція get_statti(), якій передається отриманий ідентифікатор категорії. При цьому дана функція повертає масив статей даної категорії, далі цей масив конвертуємо в JSON рядок і виводимо її на екран за допомогою функції echo. Але так як дана ділянка коду працює тільки при зверненні через метод AJAX значить весь вивід на екран – це відповідь від сервера, який потрапить в змінну html нашого скрипта.

Тепер давайте перейдемо в браузер і протестуємо наш скрипт:

Віджет Selectmenu бібліотеки jQuery UI — красиво оформляємо теги select

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