Этот туториал предназначен для тех, кто делает первые шаги в изучении библиотеки Mootools. Здесь я рассмотрю две основные задачи, без которых практически не обходится ни один скрипт – это получение ссылок на элементы документа и добавление обработчиков событий к ним.
Получение ссылок на элементы
Для того, чтобы каким либо образом работать с элементами на странице, нужно получить на них ссылку. Для этого в Mootools существуют две основные функции – $() и $$(), при помощи которых можно получать элементы по id, классу, тегу или css селектору. Функция $() является аналогом стандартной document.getElementById() и предназначена для получения элементов по их ID. При помощи второй функции – $$() можно получить ссылки на несколько объектов сразу, передав ей в качестве аргумента один или несколько CSS селекторов. Следующий пример показывает получение ссылок на все элементы с классом someClass и все изображения (тег <img>), а также получение элемента по ID:
// получение элемента по ID
var elem = $('myElement');
// получение элементов по классу
var elems = $$('.someClass');
// получение элементов по тегу
var elems = $$('img');
Функция $$() всегда возвращает массив элементов, следовательно к элементам этого массива можно обращаться при помощи индекса, например так: $$(’li’)[2]. В следующем примере, мы задаем для этой функции сразу три селектора. В результате функция вернет все ссылки, элемент с id=”menu” и элементы списка с классом “alt”:
var aElem = $$('a', '#menu', 'li.alt');
Обе вышеперечисленные функции производят поиск по всему документу. Однако, если нам нужно выбрать некоторые элементы внутри другого элемента, то нужно воспользоваться функциями $E() или $ES(), которые могут принимать второй аргумент – фильтр. Разница между ними лишь в том, что $E() возвращает один элемент, а $ES() – все, соответствующие селектору внутри указанного элемента:
// возвращает первую ссылку внутри элемента DOM с id = 'myElement'
$E('a', 'myElement');
// получение всех ссылок внутри $('myElement')
$ES('a','myElement');
Создание и добавление элементов в DOM.
Новые элементы создаются при помощи класса Element:
var myImg = new Element ( 'img' , { 'src' : 'aa.jpg', 'alt': 'Мое фото' }) ;
Первый аргумент это имя тега, а второй это список аргументов в виде объекта. В этом примере мы создали новый элемент <img>, с двумя атрибутами – src и alt. Помимо прочего, во второй аргумент можно передавать специальные атрибуты styles и events, для установки стилей и обработчиков событий для создаваемого элемента:
new Element('a', {
'styles': {
'display': 'block',
'border': '1px solid black'
},
'events': {
'click': function(){
//aaa
},
'mousedown': function(){
//aaa
}
},
'class': 'myClassSuperClass',
'href': 'http://mad4milk.net'
});
Теперь, чтобы добавить созданный элемент в документ, можно воспользоваться одной из следующих функций:
- injectBefore(element); – вставляет новый элемент перед элементом element.
- injectAfter(element); – вставляет новый элемент после элемента element.
- injectInside(element); – добавляет новый элемент в элемент element. Новый элемент будет последним в списке дочерних (эта функция аналог стандартной appendChild).
- injectTop(element); – добавляет новый элемент в элемент element. Новый элемент будет первым в списке дочерних.
В качестве примера, покажу создание элемента и добавление в документ с использованием injectBefore(), остальные функции работают похожим образом:
// создаем элемент
var myImg = new Element ( 'img' , { 'src' : 'aa.jpg', 'alt': 'Мое фото' }) ;
// добавляем его в документ перед элементом с id="main"
myImg.injectBefore($('main'));
В этом примере сначала создается изображение с двумя атрибутами – src и alt, а затем оно добавляется перед элементом с id=”main”.
Добавление обработчиков событий
В Mootools, обработчики событий, или вернее сказать “слушатели” (listeners), добавляются к элементам при помощи функции addEvent(), которая имеет следующий синтаксис:
element.addEvent(event, function);
Здесь element – элемент DOM, к которому нужно добавить обработчик, event – тип события без приставки ‘on’ (’click’, ‘load’), function – функция или указатель на функцию, которая должна выполняться при возникновении события. Пример:
$('myElement').addEvent('click', function() {alert('test');} );
// fTest - указатель на функцию
$('myElement').addEvent('click', fTest);
function fTest () {
alert('test');
}
Поскольку addEvent использует слушатели событий, то к элементам можно добавлять одновременно несколько функций обработчиков. Особое внимание стоит уделить событию onload. Оно возникает при полной загрузке страницы, включая все изображения и флэшки. Это значит, что прежде, чем функция обработчик выполнится, пользователю прийдется ждать пока загрузится все изображения, хотя структура DOM уже полностью готова к работе, и если на сайте большое количество различной графики, то ожидание может затянуться надолго. Для исправления этой ситуации, в Mootools существует событие domready, которое вызывается сразу же после загрузки структуры документа:
window.addEvent('domready', function(){ ... });
Пример
В качестве примера создадим простой HTML документ с меню, выполненным в виде маркированного списка. Затем, получив ссылки на элементы меню, добавим к ним простой обработчик. Структура меню выглядит следующим образом:
<div id="accordion"> <h3 class="toggler menusection">Меню</h3> <div class="element menusection"> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> </div> </div>
Код JavaScript:
window.addEvent('domready', function(){
$ES('li','accordion').addEvent('click', newItem);
});
function newItem() {
var el = new Element('li', {
'events' : {'click' : newItem}
});
el.setHTML('Link');
el.injectInside($E('ul','accordion'));
}
Вначале, мы добавляем обработчик к событию domready объекта window. Этот обработчик получает все элементы <li> внутри элемента с id=accordion и в свою очередь добавляет обработчик newItem к событию onclick. В результате, при щелчке на любом элементе маркированного списка, будет вызываться функция newItem(), которая создает новый элемент <li> и добавляет его в этот же список.
