Mootools для начинающих, урок №1
Всем привет!
Сегодня мы начнем знакомство с довольно популярным js-фреймворком Mootools. Этот фреймворк довольно компактный, модульный (то есть можно не угрузить ненужный код) и объектно-ориентированный.
Mootools считается более «программерским» фреймворком (соответственно, jQuery — дизайнерским). Однако и тот, и другой имеют ряд преимуществ и очень удобны в работе. Вот только о jQuery мы говорили с самого начала, а Mootools до этого не затрагивали. Надо исправить недоразумение ;-)
Итак, сегодня мы научимся получать элементы DOM, манипулировать свойствами (стилями и классами) и применять события к этим элементам. В конце будет небольшой пример, как связать это все воедино.
Подключение
Для начала идем на страницу загрузки фреймворка и качаем сжатый файл (всего 63 КБ). Сейчас мы загрузили полное ядро фреймворка, но в дальнейшем вы можете загружать только необходимые модули.
Теперь подключаем файл к странице, скажем в хедер:
<html>
<head>
<title>MooTools начинающих</title>
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
</body>
</html>
Получение DOM элементов
Для того, чтобы получить элемент по его id, необходимо сделать следующее:
var myElement = $('elementId');А чтобы получить все элементы с каким-то классом, можно сделать вот так:
var myElements = $$('.elementsClassName'); // в итоге получим массивВообще говоря, аргументом оператора $$() может быть любой CSS селектор. Кроме того, у функции может быть любое количество аргументов, каждый из которых представляет собой один или несколько элементов. Приведу более наглядные примеры:
$$('#myWrapper a') // все <a> внутри элемента с id="myWrapper"
$$('img[alt=^Image]') // все картинки, alt которых начинается с Image
$$(myelement1, 'a', '#myid', document.getElementsByTagName('div')); // массив этих элементовМанипулирование классами и свойствами
Ну что, получать элементы уже умеем, теперь давайте посмотрим, как управлять классами и другими аттрибутами элементов. Рассмотрим, что мы можем делать с классом элемента:
myElement.addClass('test-class'); // добавляет класс к элементу
myElement.removeClass('test-class'); // убирает класс у элемента
myElement.hasClass('test-class'); // проверяет, есть ли такой класс у элемента
myElement.toggleClass('test-class'); // если есть класс, убирает его, в противном случае добавляет
Для получения какого-либо аттрибута элемента можно использовать функции get('attr'), getProperty('attr') или getProperties('attr1', 'attr2', ...) (последняя возвращает ассоциативный массив значений). Соответственно, для установки аттрибута используем set('attr', 'val'), setProperty('attr', 'val') и setProperties({attr1: val1, attr2: val2}).
Рассмотрим пример. Допустим у вас есть две картинки и вы хотите взять значение alt у первой и поставить его в alt второй:
<img src="img1.png" alt="Картинка №1" id="img1" />
<img src="img2.png" alt="Картинка №2" id="img2" />
<script type="text/javascript">
$('img2').set('alt', $('img1').getProperty('alt'));
</script>
Привязка событий
Привязка события осуществляется функцией addEvent(). Ее первый аргумент — тип события, второй — фунция, которая будет выполняться при этом событие на этом элементе.
Например, для того, чтобы выполнить какую-то функцию сразу после загрузки DOM, нужно написать вот так:
document.addEvent('domready', function() {
myFuntion();
});А если вы хотите, чтобы при клике на ссылку выполнялась какая-то функция, то сделать это можно вот так:
<a href="/" id="my-link">ссылочко</a>
<script type="text/javascript">
document.addEvent('domready', function() {
$('my-link').addEvent('click', function(event) {
event.preventDefault(); // отменяем стандартное действие при клике, чтобы не было перехода по ссылке
myFunction();
});
});
</script>Пример
За первый урок мы научились получать элементы DOM, манипулировать их классами и аттрибутами, и привязывать события. Для закрепления материалы предлагаю реализовать простой пример: у нас есть группа объектов, при клике на какой-то один из них, он выделяется, а остальные остаются одинаковыми. Плюс к этому, при наведении на каждый элемент, он тоже как-то выделяется.
Для начала сделаем html. Пусть в качестве элементов будут элементы списка:
<ul id="my-list">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Четвертый</li>
<li>Пятый</li>
</ul>
Теперь черед CSS. Ага, один момент. Мы, конечно, могли бы как-нибудь выделить элемент прямо из JS, прописав ему, к примеру, жирность и фон, но, как все модные парни, мы помним о прогрессивном улучшении и не будет мешать программную логику и оформление. Так что придумаем класс для выделенного элемента:
li.selected {
background: #D50303;
color: #FFF;
font-weight: bold;
}
Теперь самое интересное, JavaScript:
document.addEvent('domready', function () {
var lis = $$('#my-list li'); // получаем все необходимые элементы
// когда курсор на объектом — приписываем ему класс, когда нет — убираем
lis.addEvent('mouseover', function () {
this.addClass('hover');
});
lis.addEvent('mouseout', function () {
this.removeClass('hover');
});
// действие при клике
lis.addEvent('click', function () {
lis.removeClass('selected'); // убираем у всеъ элементов класс 'selected'
this.addClass('selected'); // к тому, по которому кликнули, приписываем
});
});
Все готово, смотрим:
Понравилась статья?
Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.
Комментарии — 20
RSSЗдесь, все-таки, используется не массив элементов, а переменное число аргументов.
Массив элементов выглядел бы так:
Конечно, для доступа к этим аргументам используется массив arguments, но это происходит внутри функции, а не при ее вызове.
Подскажите лучше js-фреймворк с синтаксисом селектора как у XPath?
Насколько я знаю, jQuery поддерживает такие селекторы
Ваш «пустой» коммент я удалил
Очень часто читаю ваш блог, с iPhona. Обрезаются кодовые вставки (примеры написания кода), т.е не появляется горизонтальная полоса прокрутки. Нет в планах оптимизанции под малодюймовые девайсы?
подскажите пжл как можно побороть данную проблему.
Главная
О нас...
Сервисы
Резюме
Блог
Контакты
document.addEvent('domready', function () {
var lis = $$('.menu li a');
lis.addEvent('mouseover', function () {
this.addClass('hover');
});
lis.addEvent('mouseout', function () {
this.removeClass('hover');
});
lis.addEvent('click', function (event) {
event.preventDefault();
lis.removeClass('current');
this.addClass('current');
});
});
применил пхп только оно помогло ))
видимо так как я сделал перезагрузку страници мне яваскрипт не поможет.
или я не прав ?
На сколько знаю я, то Мутулз срабатывает после загрузки всей страницы и соответственно, проверка параметров должна быть после их установки :)
Пример на пальцах: у тебя ЕСТЬ 2 яблока. У тебя 2 яблока?)))