Mootools для начинающих

Продолжим изучать 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 существует две функции:

1. $(“id”) – с помощью функции $ можно получить элемент по его id
2. $$(“.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. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. пример):

1. когда загрузится страница и DOM будет готов к манипуляциям
2. привязываемся к событию click для элемента <a class=”run”>
3. будем манипулировать элементом <div id=”box”>
4. создаем объект Fx.Morph – в качестве первого параметра скармливаем ему “box”, в настройках указываем. что вся анимация должна вызываться последовательно link=chain (по умолчанию link=ignore – т.е. вся предыдущая анимация будет игнорироваться)
5. уменьшаем прозрачность до 0.1, наращиваем позицию left до 400px
6. затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20
7. затем opacity=1, left=0, height=100, width=100
8. затем top=0
9. затем добавляем в стек анимации еще две функции со следующими вызовами:
   • slide(“out”)
   • slide(“in”)
10. возвращаем 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, который необходимо инициализировать со следующими параметрами:

1. $$(‘.accordion h3′) – указываем кликабельные элементы (toggler)
2. $$(‘.accordion p’) – указываем элементы, которые будут слайдитсья
3. {…} – указываем дополнительные настройки

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");
});

Полезные ссылки

• http://mootools.net/docs/core/ – официальная документация по ядру фреймфорка (русский)
• 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 – полезно