Study & Dev За програмиране и др

Сложни javascript интерфейси заедно с Yahoo UI. Част 3

25 септември 2008 г. Коментарите са изключени за сложни интерфейси на javascript заедно с Yahoo UI. Част 3

Първото нещо, което трябва да имате предвид, е да създадете меню. За да направим това, използваме възможностите на модула Меню, който трябва да бъде включен в главата на вашия html файл. За това и всички примери, които следват, използвам зареждане на модули с yahoo Loader (което разгледах подробно в последната статия). Всички действия за инициализиране на компоненти се извършват в манипулатора на събития "и DOM се зарежда и модулите също":

За да избегнете проблеми, първата стъпка е да заредите модулите, необходими за работа на приложението (в допълнение към менюто това са модули като dom и event). В манипулатора на събития „модулите са заредени“ създавам нов манипулатор на събития DOMReady и, знаейки, че всички необходими HTML ресурси са готови за работа, извиква функцията startApp. Ще поставя кода вътре в тази функция за всички следващи примери. Особеността на операцията onDOMReady е такава, че дори ако присвоя на манипулатор на събития „html документ готов за работа“ много по-късно, отколкото се е случило, събитието така или иначе няма да бъде „загубено“. За да изглежда менюто прилично и оформлението му не се разпада, присвоих стойността на css класа на body tag class = "yui-skin-sam".

Важен момент трябва да бъде подчертан веднага. Има два начина за създаване и персонализиране на поведението на компонентите на yui: използване на специална html маркировка и програмно използване на javascript. Няма голяма разлика между тези два подхода и въпреки че в началото ще покажа два начина, в бъдеще ще се опитам да избягвам html-кода като твърде негъвкав и доста тромав. И така да тръгваме. Най-простото меню трябва да бъде създадено в някакъв div блок и да има структура, посочена с помощта на елемента UL (самият списък) и LI (елементи на менюто). Тагът bd div създава ефект на падаща сянка за менюто (вижте фигура 1).

Като начало написах js-код, който създава yahoo обект от менюто, като му давам като параметър името на елемента, съдържащ съдържанието на менюто:

Ако разгледате отблизо описанието на метода addItems в документацията на yahoo, ще видите, че има втори, незадължителен параметър на функцията - номерът на групата. Факт е, че менютата на yahoo са в състояние да представят не само плосък набор от данни, но и групи от свързани елементи със заглавия. Например, за да създадете менюто, показано на фиг. 2 Направих го така:

Тук, като извиках метода addItems, посочих масив с описание на елементите на масива, както и поредния номер на тази група елементи. След това използвах този номер при извикване на функцията setItemGroupTitle, указвайки кой номер на групата ще бъде присвоен на кое име. Но това не е всичко отново: сега нека се опитаме да създадем меню от няколко вложени нива (вж. Фиг. 3).

За да направите това, когато изброявате съдържанието на менюто, просто трябва да посочите като параметри не само характеристиките на текста и URL адреса, но и подменюто на параметрите. Стойността му ще бъде друг вложен обект, съдържащ списък от дъщерни елементи в менюто в елемента itemdata. Ако искате не меню на две нива, а меню на три нива, тогава просто трябва да повторите трика, описан по-горе отново:

Може да искате съдържанието на подменюто да бъде разделено на подгрупи, както е показано на фиг. пет.

Останалите параметри на менюто са свързани с проблема с визуализацията и не всички типични задачи имат лесни решения. Например, ако трябва да присвоите определена икона на всеки елемент от менюто, тогава няма да намерите стандартна функция за това и трябва да манипулирате фрагмент от DOM дървото, изградено от javascript. При програмно изграждане на менюто в страницата се вгражда един към един html код с набора от етикети ul & li, които показах в самото начало на статията. Не е трудно, но неприятно. Например в следващия пример ще добавя нов елемент от менюто. След това използвам стойността, върната от функцията addItem (ако сте използвали функцията addItems за добавяне, тогава ще ви бъде върнат масив), използвам за „фина настройка“ на външния вид на менюто. Така че полето на елемента съхранява връзка към html-елемента на изгледа на елемента от менюто („li“ е елемент от списък, а „a“ е вътре в „li“). След това, използвайки добър стар css, добавям икона към елемента от менюто:

Общи съвети: много функции за работа с визуални елементи връщат връзка към генерирания html елемент, към който можете да приложите css стилове за фина настройка на външния вид на генерираната страница.

Що се отнася до останалите свойства за персонализиране на външния вид на менюто, ще започнем с разглеждането на модификатора на позицията. Има две опции за това как менюто може да бъде позиционирано на страницата: статично (статично) или динамично (динамично).

Друго интересно свойство при конфигуриране на менютата е "мързел". Идеята е, че ако менюто е много, много голямо и в същото време не винаги се използва, тогава има смисъл да се отложи създаването на менюто до първия достъп до него. За такова "спестяване на мачове" се използва записът "lazyload: true". Последното нещо, което ще спомена, преди да започна да разглеждам конкретните подменюта, са параметрите на метода за рендиране. Не забравяйте, че когато създадох менюто въз основа на html маркировката, която изрично посочих, извикването на метода за рендиране беше без параметри. Това правило обаче не е абсолютно: когато се генерира меню въз основа на данни от javascript, възниква въпросът къде да се постави менюто? И ако напиша нещо като menu.render (‘target’). Това меню ще бъде добавено към елемента с целеви идентификатор.

Когато хората говорят за менюта, те почти винаги се сещат за още няколко контроли, които решават подобни проблеми. На първо място, това е контекстно меню, което се появява, когато щракнете с десния бутон върху която и да е част от html страницата. Няма промени в работата с контекстното меню в сравнение с „нормалното“. Всъщност контекстното меню е представено от класа YAHOO.widget.ContextMenu, който наследява от познатия клас Menu. За да демонстрирам как работи контекстното меню, създадох div (с идентификатор „block“), който ще реагира на щракване с десен бутон. След това пиша следния код на javascript:

Информацията, посочена при създаване на елемента от менюто в атрибута obj, ще бъде предадена на функцията doFruit като трети параметър - args. Първият и вторият параметър съдържат информация за събитието, настъпило от гледна точка на библиотеката на yahoo: първият параметър е низ с името на събитието (само думата „щракване“), вторият атрибут указва html обекта на събитието MouseEvent. Последното нещо, което искам да спомена, преди да премина към останалите компоненти на yui, е грижата за посетителя на вашия сайт. Има шанс (макар и много малък), че javascript ще бъде деактивиран в браузъра на клиента и трябва да му предложим алтернативно съдържание. Ако е почти невъзможно да се направи това за сложни компоненти, например дърво или плоча (най-много можете да се справите с надпис „сайтът да работи правилно, трябва да активирате javascript“), тогава можете предлагат алтернативно статично съдържание за менюто. Съветвам ви да се обърнете към примерите за работа с менюто от yahoo, там ще намерите демонстрация на техниката Progressive Enhancement. Това е, когато на страницата присъства статична версия на менюто (под формата на същия списък ul и това меню е видимо за всички потребители и, особено важно, за търсачките). И ако клиентът има активиран javascript, тогава менюто се заменя с версия със "специални ефекти".

Друг тип меню е менюто. В този случай менюто „залепва“ в горната част на прозореца на браузъра, елементите от менюто са подредени хоризонтално. Накратко, менюто се държи точно като думата ms на главното меню, в която въвеждам тези редове (вж. Фиг. 6).

Няма други особености, освен замяната на името на класа, който се създава от Menu на MenuBar: параметрите на външния вид и списъкът с елементи от менюто са настроени еднакво във всички случаи. Не забравяйте просто да извикате метода за рендиране с body като параметър. В този случай ще бъде генериран нов div блок с идентификатор, равен на „barplaceholder“, за да се покаже менюто и ще бъде залепен към горната граница на цялото съдържание на html страницата.