Create Drop Down Menu using YUI (Yahoo User Interface) Library Создание выпадающего меню, используя YUI (Yahoo пользовательский интерфейс) библиотеки

You seem to be using a version of Internet Explorer. Вы, по-видимому, используя версию Internet Explorer. For a safer browsing experience, please consider Для безопасного поиска, просьба рассмотреть and и

If you're new here, you may want to subscribe to our RSS feed as well as to our NewsLetter (on Top Right hand menu) to get highly informative articles weekly...and NO, we never spam! Если вы новичок на сайте, Вы можете подписаться на наш канал, а также наши с новостями (по началу Правое меню), чтобы получить весьма информативным статей неделю ... и НЕТ, мы никогда не спам!

Edit - I am having serious problem in maintaining the formatting of all the code so what I have done is I have put the Complete original article in a text file here . Изменить - У меня серьезная проблема сохранения форматирования кода все это то, что я сделал это я поставлю Полный оригинал статьи в виде текстового файла здесь. Feel free to look at it and use it and my apology for this mess up Не стесняйтесь смотреть на него и использовать его и мои извинения за это перепуталось до

---------------
The Web is evolving. Интернет развивается. It is not how it was few years back. Речь идет не о том, как было несколько лет назад. Gone are those days when websites meant a set of static pages that had white background, one-two images. Прошли те времена, когда веб-сайты означает набор статических страниц, которые белом фоне, один - два изображения. Now people want desktop experience in their browser; and what is a desktop with out a menubar with drop-down menus. Теперь пользователи настольных опыт в свой браузер; И что с рабочего стола из меню с раскрывающимися меню. Drop down menu can be implemented in many ways. Выпадающего меню может осуществляться по-разному. But instead of hand coding from scratch, we will use YUI or Yahoo User Interface Library. Но вместо ручного кодирования с нуля, мы будем использовать YUI или Yahoo Пользовательский интерфейс библиотеки. It is a new yet one the best JS library out there. Это еще один новый лучших JS библиотека там.

Perquisites and installation Ремонт и монтаж
Download YUI from here , decompress and put it in an appropriate directory that is accessible from your site. Скачать YUI отсюда, разархивировать и поместить в соответствующую директорию, доступную с вашего сайта. YUI is divided into packages such DOM, menu etc. Some packages depends on other packages. YUI делится на такие пакеты DOM, меню т.д. Некоторые пакеты зависят от других пакетов. Our menu package depends on Event, DOM and Container. В меню пакета зависит от событий, DOM и контейнерные перевозки. We will have to include them too. Нам придется включать их слишком.

The Beginning Начало

First we will include the important files. Сначала будет включать важные файлы.

   <link href = "yui/build/reset/reset.css" rel = "stylesheet" type = "text/css" / > <link href = "yui/build/fonts/fonts.css" rel = "stylesheet" type = "text/css" / > <link href = "yui/build/menu/assets/menu.css" rel = "stylesheet" type = "text/css" / > <script src = "yui/build/yahoo/yahoo.js" type = "text/javascript" > </script> <script src = "yui/build/event/event.js" type = "text/javascript" > </script> <script src = "yui/build/dom/dom.js" type = "text/javascript" > </script> <script src = "yui/build/menu/menu.js" type = "text/javascript" > </script>   тегов href = "yui/build/reset/reset.css" соответствующих типа "stylesheet" = = "text/css" /> <связь href = "yui / строительство / шрифты / fonts.css" соответствующих = "стилей" типа = "текст / css" /> href = тегов "yui/build/menu/assets/menu.css" соответствующих типа "stylesheet" = = "text/css" /> <сценарий src = "yui / строительство / yahoo / yahoo.js "тип =" текст / javascript "> </ сценарий> & src = "yui/build/event/event.js" типа = "text/javascript"> </ сценарий> <сценарий src =" yui / строительство / дом / dom.js "тип =" текст / javascript "> </ сценарий> & src = "yui/build/menu/menu.js" типа = "text/javascript"> </ сценарий>

These files include three CSS files that is used to style the menu and container files for each package. Эти файлы включают три CSS файлов, используемый для стиля меню и контейнер файлов для каждого пакета. You can also change the look and feel of the menu by modifying the css. Вы также можете изменить внешний вид меню, изменив css. Now let’s build up the markup. Теперь давайте наращивать разметки. The markup for the menu will be an unordered list. Для разметки меню будет неупорядоченного списка. That is the “ul” tag. Это "ул" тега. Lets look at the code. Давайте посмотрим на код.

   <button id = "menutoggle" > Show Menu </button> <div id = "basicmenu" class = "yuimenu" > <div class = "bd" > <ul class = "first-of-type" > <li class = "yuimenuitem" > <a href = "http://mail.yahoo.com" > Yahoo! <button ИД = "menutoggle"> Показать меню </ кнопки> <div ИД = "basicmenu" класса "yuimenu" => <div класса "bd" => <ul класса "first-of-type" => <л класс = "yuimenuitem"> <a href = "http://mail.yahoo.com"> Yahoo! Mail </a> </li> <li class = "yuimenuitem" > <a href = "http://addressbook.yahoo.com" > Yahoo! Почта </> </ л> <li класс = "yuimenuitem"> <a href = "http://addressbook.yahoo.com"> Yahoo! Address Book </a> </li> <li class = "yuimenuitem" > <a href = "http://calendar.yahoo.com" > Yahoo! Адресная книга </> </ л> <li класс = "yuimenuitem"> <a href = "http://calendar.yahoo.com"> Yahoo! Calendar </a> </li> <li class = "yuimenuitem" > <a href = "http://notepad.yahoo.com" > Yahoo! Календарь </> </ л> <li класс = "yuimenuitem"> <a href = "http://notepad.yahoo.com"> Yahoo! Notepad </a> </li> </ul> </div> </div>   Блокнот </> </ л> </ ул> </ div> </ div>

This may seem very complex. Это может показаться очень сложной. But its not actually. Но его фактически не. The menu will be held in a container div that will have id “test” and class “yuimenu”. Меню будет проходить в контейнер div, которые ИД "испытание" и класса "yuimenu". This class tells this is a menu. Этот класс показывает это меню. Now another container div called “bd”. Теперь другой контейнер div называемых "bd". The start of menu will be the Начало меню будет
<ul> tag. <ul> тега. The <li> tags inside <ul> will held each of the menu items. <li> Теги внутри <ul> состоится каждого из пунктов меню. So it will have a class of “yuimenuitem”. Так что придется класса "yuimenuitem". There is some example menu items. Существует пример пунктов меню. But you will still see no effect unless the menu is fully initialized. Но вы все равно не вижу, если меню полностью инициализирован. To do it, put this code on the head section after the file includes. Чтобы сделать это, поместите этот код по голове, после раздела включает файл.

   <script type = "text/javascript" > YAHOO.example.onMenuReady = function(p_oEvent) {                 var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });                 oMenu.render();                 oMenu.show();                 function onMenuToggleMouseDown(p_oEvent) {                     YAHOO.util.Event.stopPropagation(p_oEvent);                      oMenu.show();                 }                 YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);             }             YAHOO.util.Event.onContentReady("basicmenu", YAHOO.example.onMenuReady); </script>   & "text/javascript" типа => YAHOO.example.onMenuReady = функция (p_oEvent) (var oMenu = новый YAHOO.widget.Menu ( "basicmenu", (fixedcenter: Действительно)); oMenu.render (); oMenu.show (); функция onMenuToggleMouseDown (p_oEvent) (YAHOO.util.Event.stopPropagation (p_oEvent); oMenu.show ();) YAHOO.util.Event.addListener ( "menutoggle", "mousedown", onMenuToggleMouseDown);) YAHOO.util.Event.onContentReady ( "basicmenu", YAHOO.example.onMenuReady); </ сценарий>

As you can see the menu is initialized by the “new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });” This takes several arguments. Как вы можете видеть меню присоединять "новых YAHOO.widget.Menu (" basicmenu ", (fixedcenter: Действительно)); Это занимает несколько аргументов. The first being the id of the menu div, while the second is a list of options. Первый идентификатор меню div, а второй - список опций. You will find out about all the options in the API documentation. Вы узнаете обо всех вариантов в API документации.

When you view the page you will see a menu just like “start menu”. При просмотре страницы вы увидите меню, как и "меню" Пуск "". Just change the css to match your sites look and feel. Просто менять css на ваших сайтах внешний вид. You can also add multi tier menu. Можно также добавить многолетних уровня меню. By adding another <ul> tag inside a <li> tag. Добавив еще <ul> тега внутри тега <li>. So I hope you will add some cool menus in your site. Поэтому я надеюсь, Вы добавите какой-нибудь классный меню сайта.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. Обмен и Наслаждайтесь: Эти иконы ссылки на сайты социальных закладок, где читатели могут делиться и открывать новые страницы.

(No Ratings Yet) (Нет Рейтинги Еще)

Loading ... Загрузка ...

Subscribe in a reader | Подписка на читателя |

Links you may find interesting - Ссылки вы можете найти интересные -

This entry was published on Sunday, August 12th, 2007 at 3:07 pm and is categorized under Scripts , Tutorials . Эта позиция была опубликована в воскресенье, августа 12th, 2007 в 3:07 часов и классифицируется по Скрипты, Обучение. You can follow any responses to this entry through the magic of RSS 2.0 . Вы можете следить за любыми ответы на эту запись через магию RSS 2.0. You can also leave a response , or trackback from your own site. Вы также можете оставить отзыв, или Trackback со своего сайта.

Yes ! Да! Comments are FOLLOW So feel free to link back to related and meaningful posts. Комментарии ПОСЛЕДУЮЩИЕ Поэтому не стесняйтесь ссылкой на смежных и значимых должностей.