Каталог статей
Поиск по базе статей  
Статья на тему Интернет » Интересное в сети » Yahoo! U er Interface&nb p;&mda h; открытый набор библиотек для веб-разработчика

 

Yahoo! U er Interface&nb p;&mda h; открытый набор библиотек для веб-разработчика

 

 

Рис. 1. Yahoo! developer Network

Около года назад мы писали о старте проекта Yahoo! User Interface (рис.

загрузка...

 

 

1),
который на тот момент был представлен версией 0.9.6. За год активного развития проект выпустил уже два релиза, и сейчас активной является сборка 2.2.2. В состав библиотеки входят скрипты, виджеты, комплекты стилей и огромная библиотека примеров. Распространяется YUI исключительно по BSD-лицензии.

Основные объекты Yahoo! User Interface

Корневым объектом является Yahoo Global Object (YGO). Этот объект отвечает за создание пространств имен (namespaces) для утилит, виджетов и примеров. Его обязательно необходимо включать в скрипты, в которых используются компоненты YUI. Приведем пример кода включения YGO в скрипт:

<script type="text/javascript" src="/redir.php?url=yui.yahooapis.com%2F2.3.0%2Fbuild%2Fyahoo%2Fyahoo-min.js%26%2334%3B%26gt%3B%3C%2Fnobr%3E%26lt%3B%2Fscript%26gt%3B%3C%2Fsamp%3E

В состав YGO входит следующий набор основных методов:

  • YAHOO.namespace — создание пользовательского пространства имен;
  • YAHOO.lang — обеспечение управления поддержкой языков;
  • YAHOO.log — обеспечение ведения логов;
  • YAHOO_config — управление конфигурацией решения;
  • YAHOO.env — определение используемого на клиенте окружения: операционная система, браузер и тому подобное;
  • YUI Module Names — поддержка именования пользовательских модулей.

DOM-модель

Библиотека YUI построена на использовании объектной модели браузера, точнее, загруженного в него документа: Document Object Model (DOM). Соответственно, объект библиотеки DOM является одним из базовых. Доступ к DOM обеспечивает компонент YAHOO.util.Dom, входящий в объект YGO. В нем собраны методы обработки событий в окне браузера, идентификации элементов страницы и стилей, расширенный набор регулярных выражений, определение типа и настроек браузера. Полная документация по DOM-объекту размещена в файле dom.js.html. Для использования объекта в своем скрипте достаточно подключить соответствующий js-файл: dom.js, или dom-min.js, или dom-debug.js. Первый из них содержит максимально полный набор функций, второй — базовый, а dom-debug содержит дополнительные функции отладки скрипта.

Для создания наиболее часто используемых на веб-сайтах функций библиотека содержит модули формирования дерева, меню (несколько различных представлений), перемещения элементов (Drag and Drop), работы с данными из базы, управления панелями на странице, сортировки данных, создания диалоговых окон, помощи пользователю, контекстных подсказок и многие другие. Познакомимся подробнее с использованием некоторых из этих модулей. Начнем с модуля создания меню. На самом деле в этот модуль входит несколько объектов, которые предназначены для создания различных представлений меню: файловое, контекстное, всплывающее и так далее. В качестве родительского объекта для любого меню используется виджет YAHOO.widget.Menu, который использует объектную DOM-модель. Для создания меню вызываем конструктор:

Утилита создания меню

YAHOO.widget.Menu.superclass.constructor.call(
 this,
 p_oElement,
 p_oConfig
);

Рис. 2. Простое меню

Посмотрим, как создать самый простой тип меню, который называется Basic Menu (рис. 2.). Для этого вызываем конструктор меню, как показано на примере, и в качестве параметра передаем тип меню: basicmenu. Параметр fixedcenter определяет расположение меню на странице. Непосредственно отображение на странице производит метод show.

<script type="text/javascript">
YAHOO.example.onMenuReady = function() {
 var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
 oMenu.render();
 oMenu.showEvent.subscribe(function() {
 this.focus();
 });
 oMenu.show();
 YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
};
YAHOO.util.Event.onContentReady("basicmenu", YAHOO.example.onMenuReady);
</script>

Рис. 3. Примеры типов меню

Помимо самого простого шаблона меню в YUI содержится еще немало других: горизонтальные, вертикальные, анимированные, с переменным позиционированием. Внешний вид различных вариантов меню представлен на рис. 3. С образцами использования можно познакомиться в стандартном пакете загрузки в папке examples\menu.

Утилита управления деревьями

В очередной версии YUI существенно увеличено количество различных видов деревьев (рис. 4). Это позволяет использовать готовые механизмы для самых различных дизайнов сайтов.

Рис. 4. Типы деревьев

Подключение утилиты treeview осуществляется в теле страницы следующими скриптами.

Подключение базовых библиотек:

<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>

Подключение логирования:

<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>

Подключение утилиты построения дерева:

<script type="text/javascript" src="../../build/treeview/treeview-debug.js"></script>

Среди других полезных утилит можно назвать tableview, grids, dragdrop, animation, autocomplete. Так, утилиты tableview и grids позволяют организовать табличное отображение данных и управление ими. Dragdrop — отслеживает и позволяет обрабатывать события, связанные с взаимодействием мыши и объектов на веб-странице. Утилита animation содержит функции перемещения объектов, изменения их размеров и поворотов.

Powered by Yahoo! User Interface

Созданное за год с небольшим разнообразие модулей не осталось незамеченным веб-сообществом во всем мире. Уже несколько сотен публичных интернет-ресурсов используют те или иные элементы из представленной библиотеки. Среди них, например, фотоальбом сообщества Opera — My Opera и такая известная социальная сеть профессионалов, как Linked In, о которой подробно рассказывал и наш информационный ресурс. Сейчас в стадии бета-тестирования находится еще целый ряд интересных модулей, например текстовый редактор, утилиты работы с данными и специализированный модуль тестирования. Будем ждать!

Ссылки по теме




Статья получена: hostinfo.ru
загрузка...

 

 

Наверх


Постоянная ссылка на статью "Yahoo! U er Interface&nb p;&mda h; открытый набор библиотек для веб-разработчика":


Рассказать другу

Оценка: 4.0 (голосов: 16)

Ваша оценка:

Ваш комментарий

Имя:
Сообщение:
Защитный код: включите графику
 
 



Поиск по базе статей:





Темы статей






Новые статьи

Противовирусные препараты: за и против Добро пожаловать в Армению. Знакомство с Арменией Крыша из сэндвич панелей для индивидуального строительства Возможно ли отменить договор купли-продажи квартиры, если он был уже подписан Как выбрать блеск для губ Чего боятся мужчины Как побороть страх перед неизвестностью Газон на участке своими руками Как правильно стирать шторы Как просто бросить курить

Вместе с этой статьей обычно читают:

Открытые, культовые, стильные: кабриолеты прошлых лет

Alfa Romeo Spider Alfa Romeo Spider появилась на рынке в 1983 году, частично дизайн перекликается со знаменитым Porsche 911, но тем нее менее все равно индивидуален. Автомобиль выпускался с 1983 по 1992 год. BMW 325i Cabrio Кабриолет не планировался в модельном ряду 3 серии BMW тех лет, однако спустя 4 года после выхода на рынок седана он все же появился.

» Немецкие автомобили - 3292 - читать


Seat Toledo: Открытие Toledo

В тесте участвуют автомобили: Seat Toledo Субботняя Барселона встретила тридцатиградусной жарой. На пустынной в этот день стоянке центрального офиса СЕАТа в промышленном районе "Зона Франко" меня терпеливо дожидался новенький с иголочки "Толедо".

» Немецкие автомобили - 1780 - читать


Peugeot 307, Renault Megane: Наслаждаясь открытым небом

В тесте участвуют автомобили: Peugeot 307, Renault Megane Посмотреть другие фото (10) Peugeot 307 CC Модель 2003 года. В продаже с осени.

» Французские автомобили - 2527 - читать


Amne ty International осуждает Yahoo, Micro oft и Google

по данным пресс-релиза Amnesty International, от Ирана до Мальдивских островов, от Кубы и до Вьетнама, правительства, во-первых, преследуют людей, излагающих свои взгляды в Интернете, а во-вторых, лишают своих граждан доступа к залежам информации в сети. Пользователей бросают в тюрьмы, интернет-кафе закрываются, за беседами в чатах ведётся слежка, а блоги уничтожаются. Власти блокируют доступ к сайтам, налагают запрет на новости из-за рубежа и устанавливают фильтры, скрываю ...

» Продвижение и оптимизация - 1442 - читать


Яндекс и Google для работы, Рамблер по привычке, Yahoo для беклинков

В сентябре редакцией SEOnews было проведено социологическое исследование на тему «Приоритеты SEO-специалистов при выборе поисковиков». Отправной точкой в проведении данного исследования послужили результаты опроса компании Nielsen/NetRatings, выяснявшей, сколькими и какими поисковиками пользуется англоязычная аудитория. Цель нашего исследования - выяснение, какими поисковыми системами и почему предпочитают пользоваться русскоязычные SEO-специалисты.

» Продвижение и оптимизация - 2072 - читать



Статья на тему Интернет » Интересное в сети » Yahoo! U er Interface&nb p;&mda h; открытый набор библиотек для веб-разработчика

Все статьи | Разделы | Поиск | Добавить статью | Контакты

© RusAdvice.Org, 2006-2014, при копировании материалов, прямая индексируемая ссылка на сайт обязательна.

Энциклопедия RusAdvice.Org