Все о Joomla 1.5

...заметки Котофеича

 
  • Increase font size
  • Default font size
  • Decrease font size

Home Интерфейс Yahoo Yahoo user interface - модель DOM

Yahoo user interface - модель DOM

27.04.2008 07:43 YUI
E-mail Печать PDF
Этой статьей я открываю цикл статей, по интерфейсу Yahoo. Этот интерфейс представляет собой набор очень мощных кроссбраузерных библиотек javascript по расширению функционала пользователя. Сначала рассмотрим, как с помощью этих библиотек управлять моделью DOM, то есть структурой и всеми объектами на странице. Оригинал вы можете прочитать здесь YUI
Для удобства использования YUI в Joomla я сделал плагин plug_yui, который подключает необходимые библиотеки, если в статье ввести имя беблиотеки, например yahoo-min, dom-min (написанных в квадратных скобках). Я сейчас не могу написать их в квадратных, потому что подключиться плагин и удалит их из текста. Плагин будет дописываться по мере написания статей.
Для начала в страницу нужно подключить следующие библиотеки: 
<!-- ядро, устанавливающее зависимости -->
<script src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"></script>   
 <!-- Библиотека DOM -->  
 <script src="http://yui.yahooapis.com/2.5.1/build/dom/dom-min.js"></script>
YAHOO.util.Dom представляет собой синглтон паттерн, и не требует инстанцирования. Доступ к методам происходит например так: YAHOO.util.Dom.getXY ( "myElementId"), YAHOO.util.Dom.getStyle ( "myElementId") и т.д.

Использование библиотеки DOM

Библиотека DOM содержит следующие возможности:

Управление позицией HTML элементов

В зависимости от того, как помещается html-обьект на странице, получение его точной координаты может быть довольно затруднительным. Коллекция методов DOM (setXY(), getXY(), setX(), и так далее) упрощает эту задачу.
В следующем примере, метод getXY возвращает массив с X и Y координатами HTML элемента, чей атрибут ID равен "test". Метод SetXY устанавливает элемент с id равным "target" в позицию элемента "test". 
var pos = YAHOO.util.Dom.getXY('test');
YAHOO.util.Dom.setXY('target', pos);
Посмотреть функцию setXY в действии в Joomla.

Назначение и получение стилей

Метод GetStyle позволяет получить свойства стиля объекта; метод setStyle позволяет установить свойства стиля объекта. Изюминкой данного метода является то, что он позволяет даже установить прозрачность объекта в любом броузере. (Прозрачность поддерживается броузерами Opera начиная с 9-ой версии)
В следующем примере, метод setStyle установит элемент с id "test" и элемент с id "test2" прозрачность 0,5 (что равно 50%) . GetStyle метод возвращает текущую прозрачность элемента с id "test2". 
YAHOO.util.Dom.setStyle(['test', 'test2'], 'opacity', 0.5); 
 var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity');

Получение размеров окна

Методы GetViewportWidth и getViewportHeight позволяют получить точные размеры видимой части окна, независимо от размеров документа.
В этом примере мы получаем массив с размерами видимой части окна. 
var viewport = [
     YAHOO.util.Dom.getViewportWidth(),
     YAHOO.util.Dom.getViewportHeight()
     ];

Управление именами классов

DOM коллекция предусматривает ряд методов для динамического управления именами классов.
К ним относятся:

* GetElementsByClassName (className, tagName, rootNode): Возвращает массив элементов, которые имеют название искомого класса. Могут быть заданы необязательные параметры tagName и rootNode для увеличения производительности.
* HasClass (element, className): определяет, относится ли элемент к классу.
* AddClass (element, className): добавляет элемент к классу
* RemoveClass (element, className): удаляет класс из элемента.
* ReplaceClass (element, oldClassName, newClassName): заменяет один класс с другим именем для данного элемента.

На примере, получим массив из элементов div имеющих класс тест: 
var elements = YAHOO.util.Dom.getElementsByClassName('test', 'div');
 

переезд офисов