Проучване - Dev, архив на блогове, сложни интерфейси на Javascript заедно с потребителския интерфейс на Yahoo
Сложни 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. Ако искате не меню на две нива, а меню на три нива, тогава просто трябва да повторите трика, описан по-горе отново:
Може да искате съдържанието на подменюто да бъде разделено на подгрупи, както е показано на фиг. пет.
