Study - Dev, Blog Archive, Складні інтерфейси на javascript разом Yahoo UI
Складні інтерфейси на JavaScript разом з Yahoo UI. Частина 3
September 25, 2008 Comments Off on Складні інтерфейси на javascript разом Yahoo UI. Частина 3
Першим на розгляді буде створення меню. Для цього ми використовуємо можливості модуля Menu, який потрібно підключити до секції head вашого html-файлу. Для цього і всіх наступних прикладів я використовую завантаження модулів за допомогою Yahoo Loader (про який я докладно розповів у минулій статті). Усі дії з ініціалізації компонентів виконуються в обробнику події "і DOM завантажений і модулі теж":
Щоб уникнути проблем я першим кроком роблю завантаження необхідних роботи додатків модулів (крім, menu це такі модулі як dom і event). У обробнику події “модулі були завантажені” я створюю новий обробник події DOMReady і, який вже знаючи, що всі необхідні ресурси html готові до роботи, викликає функцію startApp. Всередину саме цієї функції я поміщатиму код для всіх наступних прикладів. Особливість роботи onDOMReady така, що навіть якщо призначу оброблювача події "документ html готовий до роботи" набагато пізніше того, як це сталося, то все одно подія не буде "втрачено". Для того, щоб меню виглядало пристойно, а його верстка не роз'їжджалася, я призначив тегу body значення css-класу class="yui-skin-sam".
Відразу потрібно виділити важливий момент. Створювати та налаштовувати поведінку yui компонентів можливо двома способами: за допомогою спеціальної html-розмітки та програмно за допомогою javascript. Великої різниці між цими двома підходами немає, і хоча на початку я покажу два способи, але в подальшому намагатимуся уникати html-коду як занадто не гнучкого і досить громіздкого. Тож поїхали. Найпростіше меню має бутистворено всередині деякого div блоку та мати структуру, задану за допомогою елемента UL (сам список) та LI (елементи меню). Тег div із класом bd створює для меню ефект тіні (див. рис. 1).
Для початку я написав js-код, який створює yahoo об'єкт меню, вказавши йому як параметр ім'я елемента, що містить у собі вміст меню:
Якщо уважно подивитися на опис методу addItems у документації Yahoo, то побачите, що є і другий, необов'язковий параметр функції - номер групи. Справа в тому, що менюшки yahoo вміють представляти не тільки плоский набір даних, а й групи пов'язаних елементів із заголовками. Наприклад, щоб створити меню, показане на рис. 2 я зробив так:
Тут викликавши метод addItems, я вказав масив із описом елементів масиву, а також порядковий номер цієї групи елементів. Потім цей номер я використовував під час виклику функції setItemGroupTitle, вказавши для якого номера групи буде призначено яку назву. Але це ще не все: тепер спробуємо створити меню з кількох вкладених рівнів (див. рис. 3).
Для цього при перерахуванні вмісту меню, лише потрібно вказати як параметри не тільки характеристики text і url, але і параметр submenu. Його значенням буде ще один вкладений об'єкт, що містить всередині елемента itemdata перелік дочірніх елементів меню. Якщо ж хочеться вже не двох рівневого меню, а трирівневого, то потрібно лише повторити описаний вище трюк ще раз:
Можливо, ви захочете, щоб вміст підменю був розбитий на підгрупи як показано на рис. 5.
Інші параметри меню відносяться до питання візуалізації і не всі типові завдання мають легкі рішення. Наприклад, якщо потрібно порівняти кожному пункту меню деякуіконку, то стандартної функції для цього ви не знайдете, і доводиться маніпулювати збудованим з JavaScript фрагментом дерева DOM. При програмній побудові меню в сторінку вбудовується html-код один до одного з показаним мною на самому початку статті набором тегів ul & li. Це нескладно, але неприємно. Наприклад, у наступному прикладі я додам новий пункт меню. Потім значення, повернене функцією addItem (якщо ви використовували для додавання функцію addItems, то вам буде повернено масив) я використовую для тонкого налаштування зовнішнього вигляду меню. Так поле element зберігає посилання html-элемент представлення пункту меню (“li” – елемент списку, а всередині “li” знаходиться “a”). Потім, використовуючи старий-добрий css я додаю до пункту меню значок:
Загальна порада: багато функцій роботи з візуальними елементами повертають посилання на створений html-елемент, до якого можна застосовувати css-стилі, щоб виконати тонке налаштування зовнішнього вигляду створюваної сторінки.
Що стосується інших властивостей налаштування зовнішнього вигляду меню, то почнемо з розгляду модифікатора position. Є два варіанти того, як меню може бути розташоване на сторінці: статично (static) або динамічно (dynamic).
Ще однією цікавою властивістю при конфігуванні меню є “лінивість”. Ідея в тому, що якщо меню дуже велике і при цьому не завжди використовується, то є сенс відкласти створення меню до моменту першого звернення до нього. Для такої "економії на сірниках" використовується запис "lazyload: true". Останнє про що я згадаю, перед тим, як почну розглядати особливі підвиди меню, так це параметри методу render. Згадайте, коли я створював меню на підставі явно заданої мною html-розмітки, виклик методу render був без параметрів. Однак це правило не абсолютно:коли меню генерується на основі даних з JavaScript виникає питання, де розмістити меню? І якщо я пишу щось на зразок menu.render ('target'). Це меню буде додано до елемента з ідентифікатором target.
Коли говорять про меню, то майже завжди згадують про ще декілька елементів керування, що вирішують подібні завдання. Перш за все це контекстне меню, що з'являється при правому кліку миші по будь-якій частині html-сторінки. Жодних змін у роботі з контекстним меню порівняно зі “звичайним” немає. Справді, контекстне меню є класом YAHOO.widget.ContextMenu, спадкоємцем від знайомого нам класу Menu. Для демонстрації роботи контекстного меню створив блок div (з ідентифікатором рівним “block”), який буде реагувати на натискання правої кнопки миші. Потім я пишу наступний javascript-код:
Інформація, вказана при створенні пункту меню в атрибуті obj, буде передана у функцію doFruit як третій параметр - args. Перший і другий параметри містять інформацію про подію з точки зору бібліотеки yahoo: перший параметр - рядок з назвою події (просто слово 'click'), другий атрибут задає html об'єкт події MouseEvent. Останнім про що я хочу згадати перед тим як перейду до розгляду інших компонентів yui – це турбота про відвідувача вашого сайту. Існує ймовірність (хоч і дуже маленька), що в браузері клієнта буде відключено JavaScript і нам потрібно запропонувати йому альтернативний контент. Якщо зробити це для складних компонентів, наприклад дерева або таблички практично неможливо (максимум, обійтися написом "для коректної роботи сайту потрібно включити javascript"), то для меню можна запропонувати альтернативний статичний контент. Я раджу звернутися до прикладів роботи з меню від Yahoo, там ви знайдетедемонстрацію прийому Progressive Enhancement. Це коли на сторінці є статична версія меню (у вигляді того ж списку ul і це меню видно всім користувачам і, особливо важливо, пошуковим машинам). А якщо у клієнта включений JavaScript, то меню замінюється на версію зі спец-ефектами.
Ще одним різновидом меню є menubar. У цьому випадку меню "прилипає" до верхньої частини вікна браузера, пункти меню розташовані горизонтально. Одним словом, меню веде себе точнісінько як головне меню ms word, в якому я набираю ці рядки (див. рис. 6).
Жодних особливостей крім заміни імені створюваного класу з Menu на MenuBar не відбулося: параметри зовнішнього вигляду та перелік елементів меню задається однаково у всіх випадках. Не забудьте лише викликати метод render, передавши йому як параметр body. В цьому випадку для представлення меню буде згенеровано новий блок div з id рівним "barplaceholder" і буде приклеєний до верхньої межі всього вмісту html-сторінки.