Этот туториал предназначен для тех, кто делает первые шаги в изучении библиотеки 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> и добавляет его в этот же список.

смотреть демоскачать

Запись добавлена 18 апреля 2008 в категории DOM, Events, MooTools.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.