Mootools для начинающих // JavaScript
Продолжим изучать JavaScript фреймворки. Настала очередь MooTools…
О да, будем переделывать знакомый пример еще и под Mootools :)
Подключение
Ну, для начала берем фреймворк, его вы сможете скачать с домашней страницы проекта, и подключаем:
<script type="text/javascript" src="js/mootools.js" ></script>
Mootools так же доступен в Google CDN для JavaScript библиотек:
<!-- Google -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js">
</script>
Как получить элемент с помощью MooTools?
Для получения элементов в MooTools существует две функции:
- $(“id”) – с помощью функции $ можно получить элемент по его id
- $$(“.class”) – функция $$ выбирает массив элементов используя CSS селекторы
Как и большинство других JavaScript фреймворков, MooTools опирается на CSS селекторы описанные в W3C стандарте, взгляните на диаграмму:
Еще немного примеров:
- $(“header”) – получение элемента с id=”header”
- $$(“#header”) – возвращает массив, первым элементов которого будет элемент с id=”header”
- $$(“h3”) – получить все <h3> элементы
- $$(“h3”, “h4”) – получить все <h3> и <h4> элементы
- $$(“h3, h4”) – получить все <h3> и <h4> элементы (обратите внимание на различия с предыдущим примером)
- $$(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
- $$(“ul li”) – получить все <li> элементы из списка <ul>
- $$(“ul li:first-child”) – получить только первый элемент <li> из списка <ul>
- $(“content”).getElements(“p.sel”) – получить элементы <p> с классом sel, которые находятся внутри элемента с id=”content”
- $$(“#content”).getParent() – получить предка элемента с id=”content”
Как вы можете заметить, зачастую, для получения элементов, используется функция $$ – запомните – данная функция всегда возвращает массив элементов, функции getElement, getNext, getParent и т.д. так же возвращают массив
Выдвижная панель
Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (будет “мигать” класс “active” ), а панелька с id=”panel” будет выдвигаться/прятаться. (класс “active” изменяет позицию фонового изображения, см. CSS в примере).
window.addEvent('domready', function() {
// создаем новый объект Fx.Slide (см http://mootools.net/docs/more/Fx/Fx.Slide )
var fx = new Fx.Slide('panel').hide();
// вешаем обработчик события
$$('.btn-slide').addEvent('click', function(event){
// выдвигаем/прячем панель
fx.toggle();
// добавляем/удаляем класс active
$(this).toggleClass('active');
// для того чтобы не было перехода по ссылке возвращаем false или event.stop();
return false;
});
});
Магические исчезновения
Этот пример покажет как можно красиво и легко убирать элементы со страницы (см. пример):
Когда мы кликаем по картинке <img class=”delete”>, будет найден родительский элемент <div class=”pane”>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=0.0, так же будет изменятся высота элемента до 0:
window.addEvent('domready', function() {
$$(".pane .delete").addEvent('click', function(event){
$(this).getParent().dissolve();
});
});
Связанная анимация
Теперь пример посложнее, но он поможет Вам лучше понять анимацию в MooTools. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. пример):
- когда загрузится страница и DOM будет готов к манипуляциям
- привязываемся к событию click для элемента <a class=”run”>
- будем манипулировать элементом <div id=”box”>
- создаем объект Fx.Morph – в качестве первого параметра скармливаем ему “box”, в настройках указываем. что вся анимация должна вызываться последовательно link=chain (по умолчанию link=ignore – т.е. вся предыдущая анимация будет игнорироваться)
- уменьшаем прозрачность до 0.1, наращиваем позицию left до 400px
- затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20
- затем opacity=1, left=0, height=100, width=100
- затем top=0
- затем добавляем в стек анимации еще две функции со следующими вызовами:
- slide(“out”)
- slide(“in”)
- возвращаем false для того чтобы браузер не перешел по ссылке
window.addEvent('domready', function() {
var box = $("box");
$$(".run").addEvent('click', function(){
var fx = new Fx.Morph(box, {
link: 'chain'
});
fx
.start({opacity: "0.1", left: 400})
.start({opacity: "0.4", top: 160, height: 20, width: 20})
.start({opacity: 1, left: 0, height: 100, width: 100})
.start({top: 0})
.chain(function(){
box.slide('show').slide('out');
this.start(0,1);
},function(){
box.slide('in');
})
;
return false;
});
});
Гармошка #1
Пример реализации “гармошки”. (см. пример)
В отличие от рассматриваемых ранее jQuery и Dojo Toolkit данная функциональность реализована в MooTools More за счет плагина Fx.Accordion, который необходимо инициализировать со следующими параметрами:
- $$(‘.accordion h3’) – указываем кликабельные элементы (toggler)
- $$(‘.accordion p’) – указываем элементы, которые будут слайдитсья
- {…} – указываем дополнительные настройки
var myAccordion = new Fx.Accordion($$('.accordion h3'), $$('.accordion p'), {
opacity: false, // прозрачность не меняем
onActive: function(toggler, element){ // что делать, когда элемент стал активным
toggler.addClass('active');
},
onBackground: function(toggler, element){ // что делать, когда элемент перестал быть активным
toggler.removeClass('active');
}
});
Гармошка #2
Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример):
var myAccordion = new Accordion($$('.accordion h3'), $$('.accordion p'), {
display: 2,
opacity: false,
onActive: function(toggler, element){
toggler.addClass('active');
},
onBackground: function(toggler, element){
toggler.removeClass('active');
}
});
Данный плагин по какой-то причине съел паддинги у элементов :(
Анимация для события hover #1
Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):
Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента <em>, и анимируется его прозрачность и расположение:
window.addEvent('domready', function() {
$$(".menu a").addEvents({
'mouseover':function() {
this.getNext("em").setStyles({opacity:0,'display':'block'}).morph({opacity:1, top: "-75"});
},
'mouseout':function() {
this.getNext("em").morph({opacity:0, top: "-85"});
}
})
});
Анимация для события hover #2
Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. пример):
Когда произойдет событие mouseover, мы возьмем текст из атрибута “title” вставим в новосозданный тэг <em>:
window.addEvent('domready', function() {
$$(".menu2 a").addEvents({
'mouseover':function() {
var em = new Element('em', {html:this.get('title')});
this.getParent().grab(em);
this.getNext("em").setStyles({opacity:0,'display':'block'}).morph({opacity:1, top: "-75"});
},
'mouseout':function() {
this.getNext("em").morph({opacity:0, top: "-85"}).chain(function(){this.destroy()});
}
});
});
Кликабельные блоки
Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):
Создадим список <ul> с классом class=”pane-list” и мы хотим сделать элементы <li> кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга <a> и сделает редирект на страницу указанную в атрибуте href.
window.addEvent('domready', function() {
$$(".pane-list li").addEvent('click', function(){
window.location = this.getElement("a").get("href");
return false;
});
});
Складывающиеся панельки
Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (см. пример):
- скрываем все элементы <div class=”message_body”> после первого.
- скрываем все элементы <li> после четвертого
- клик по <p class=”message_head”> – вызывает метод toggle() для следующего элемента <div class=”message_body”>
- клик по <a class=”collpase_all_message”> – вызывает метод slideOut для всех <div class=”message_body”>
- клик по <a class=”show_all_message”> – скрывает элемент, и отображает <a class=”show_recent_only”>, так же вызывается метод slide(‘in’) для всех <li> после четвертого
- клик по <a class=”show_recent_only”> – скрывает элемент, и отображает <a class=”show_all_message”>, так же вызывается метод slide(‘out’) для всех <li> после четвертого
window.addEvent('domready', function() {
// hide message_body after the first one
$$(".message_list li:not(:first-child) .message_body").slide('hide');
// hide message li after the 5th
$$(".message_list li)").filter(function(el, i) {
if (i>4) el.slide('hide');
});
// toggle message_body
$$(".message_head").addEvent('click', function(){
this.getParent().getElement('.message_body').get('slide').toggle();
});
// collapse all messages
$$(".collpase_all_message").addEvent('click', function(){
$each($$(".message_body"), function(el) {
el.get('slide').slideOut();
});
return false;
});
// show all messages
$$(".show_all_message").addEvent('click', function(){
this.hide();
$$(".show_recent_only").show();
$$(".message_list li)").filter(function(el, i) {
if (i>4) el.slide("in");
});
return false;
});
// show recent messages only
$$(".show_recent_only").addEvent('click', function(){
this.hide();
$$(".show_all_message").show()
$$(".message_list li)").filter(function(el, i) {
if (i>4) el.slide("out");
});
return false;
});
});
Fx.Slide зачем-то оборачивает элемент который необходимо слайдить в дополнительный <div> – из-за этого возникает ряд проблем
Имитация Backend’a WordPress’a
Я думаю многие из читателей сталкивались с админской частью wordpress’a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery. (см. пример):
- добавим класс “alt” к каждому чётному элементу <div class=”pane”> (данный класс изменяет цвет фона элемента)
- клик по <a class=”btn-delete”> инициирует появление диалога (confirm), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для <div class=”pane”>, затем элемент удаляется из DOMа
- клик по <a class=”btn-unapprove”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на желтый и обратно) и добавляет класс “spam”
- клик по <a class=”btn-approve”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на зеленый и обратно) и удаляет класс “spam”
- клик по <a class=”btn-spam”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на красный), и изменяет параметр “opacity” до 0 и затем удаляет элемент
window.addEvent('domready', function() {
$$(".pane:even").addClass("alt");
$$(".pane .btn-delete").addEvent('click', function(){
if (confirm("This comment will be deleted!")) {
var pane = this.getParent(".pane");
pane
.tween('background-color', '#fbc7c7')
.get('tween')
.chain(function(){
pane.fade(0);
}, function(){
pane.dispose();
});
}
return false;
});
$$(".pane .btn-unapprove").addEvent('click', function(){
var pane = this.getParent(".pane");
pane.highlight("#fff568")
.addClass("spam");
return false;
});
$$(".pane .btn-approve").addEvent('click', function(){
var pane = this.getParent(".pane");
pane.highlight("#dafda5")
.removeClass("spam");
return false;
});
$$(".pane .btn-spam").addEvent('click', function(){
var pane = this.getParent(".pane");
pane
.tween('background-color', '#fbc7c7')
.get('tween')
.chain(function(){
pane.fade(0);
}, function(){
pane.dispose();
});
return false;
});
});
Галерея изображений
Простейший пример реализации галереи, без перезагрузки страницы (см. пример):
Для начала добавим тэг <em> в заголовки <h2>
По клику на изображения в <p class=thumbs> выполняем следующие действия:
- сохраняем значение атрибута “href” в переменной “largePath”
- сохраняем значение атрибута “title” в переменной “largeAlt”
- заменяем в элементе <img id=”largeImg”> значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
- заменяем содержимое элемента “h2 em” значением из “largeAlt”
window.addEvent('domready', function() {
$$("h2").grab(new Element('em'));
$$(".thumbs a").addEvent('click', function(event){
var largePath = this.get("href");
var largeAlt = this.get("title");
$("largeImg").set({ 'src': largePath, 'alt': largeAlt });
$$("h2 em").set("html", " (" + largeAlt + ")");
return false;
});
});
Стилизируем ссылки
Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $=’.pdf’] { … }. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery (см. пример) :
Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
Затем выберем все элементы <a> которые не содержат ссылки на “http://www.webdesignerwall.com” и не начинающиеся на “#” в “href”, затем добавим им класс “external” и устанавливаем target= “_blank”.
window.addEvent('domready', function() {
$$("a[href$=pdf]").addClass("pdf");
$$("a[href$=zip]").addClass("zip");
$$("a[href$=psd]").addClass("psd");
$$("a:not([href*=http://anton.shevchuk.name])")
.filter(":not([href^=#])")
.addClass("external")
.set('target', "_blank");
});
Полезные ссылки
- https://mootools.net/core/docs/ – официальная документация по ядру фреймфорка (русский)
- http://mootools.net/docs/more/ – официальная документация по расширению “more”
- http://demos.mootools.net/ – чуть-чуть демок
- MooTorial – документация с примерами
- Анимация в MooTools. Основы и не только.
- 30 Days of Mootools 1.2 Tutorials – респект тому, кто это переведет
- MooTools 1.2 for The Non Programmer – еще документация для начинающих
- jQuery vs MooTools – полезно