Антон Шевчук // Web-разработчик

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

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 стандарте, взгляните на диаграмму:

MooTools Diagram

Еще немного примеров:

  • $(“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() {
	$$(&amp;amp;quot;.pane .delete&amp;amp;quot;).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 = $(&amp;amp;quot;box&amp;amp;quot;);
    $$(&amp;amp;quot;.run&amp;amp;quot;).addEvent('click', function(){
        var fx = new Fx.Morph(box, {
            link: 'chain'
        });

        fx
            .start({opacity: &amp;amp;quot;0.1&amp;amp;quot;, left: 400})
            .start({opacity: &amp;amp;quot;0.4&amp;amp;quot;, 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() {
    $$(&amp;amp;quot;.menu a&amp;amp;quot;).addEvents({
        'mouseover':function() {
            this.getNext(&amp;amp;quot;em&amp;amp;quot;).setStyles({opacity:0,'display':'block'}).morph({opacity:1, top: &amp;amp;quot;-75&amp;amp;quot;});
        },
        'mouseout':function() {            
            this.getNext(&amp;amp;quot;em&amp;amp;quot;).morph({opacity:0, top: &amp;amp;quot;-85&amp;amp;quot;});
        }
    })
});

Анимация для события hover #2

Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. пример):

Когда произойдет событие mouseover, мы возьмем текст из атрибута “title” вставим в новосозданный тэг <em>:

window.addEvent('domready', function() {
    $$(&amp;amp;quot;.menu2 a&amp;amp;quot;).addEvents({
        'mouseover':function() {
            var em = new Element('em', {html:this.get('title')});              
            this.getParent().grab(em);
            this.getNext(&amp;amp;quot;em&amp;amp;quot;).setStyles({opacity:0,'display':'block'}).morph({opacity:1, top: &amp;amp;quot;-75&amp;amp;quot;});
        },
        'mouseout':function() {            
		    this.getNext(&amp;amp;quot;em&amp;amp;quot;).morph({opacity:0, top: &amp;amp;quot;-85&amp;amp;quot;}).chain(function(){this.destroy()});
        }
    });	
});

Кликабельные блоки

Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):

Создадим список <ul> с классом class=”pane-list” и мы хотим сделать элементы <li> кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга <a> и сделает редирект на страницу указанную в атрибуте href.

window.addEvent('domready', function() {    
   $$(&amp;amp;quot;.pane-list li&amp;amp;quot;).addEvent('click', function(){
        window.location = this.getElement(&amp;amp;quot;a&amp;amp;quot;).get(&amp;amp;quot;href&amp;amp;quot;);
        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
    $$(&amp;amp;quot;.message_list li:not(:first-child) .message_body&amp;amp;quot;).slide('hide');

    // hide message li after the 5th
    $$(&amp;amp;quot;.message_list li)&amp;amp;quot;).filter(function(el, i) {
            if (i&amp;amp;gt;4) el.slide('hide');
        });
        
    // toggle message_body
    $$(&amp;amp;quot;.message_head&amp;amp;quot;).addEvent('click', function(){
        this.getParent().getElement('.message_body').get('slide').toggle();
    });
    
    // collapse all messages
    $$(&amp;amp;quot;.collpase_all_message&amp;amp;quot;).addEvent('click', function(){
        $each($$(&amp;amp;quot;.message_body&amp;amp;quot;), function(el) {
            el.get('slide').slideOut();
        });
        return false;
    });

    // show all messages
    $$(&amp;amp;quot;.show_all_message&amp;amp;quot;).addEvent('click', function(){
        this.hide();
        
        $$(&amp;amp;quot;.show_recent_only&amp;amp;quot;).show();
        
        $$(&amp;amp;quot;.message_list li)&amp;amp;quot;).filter(function(el, i) {
            if (i&amp;amp;gt;4) el.slide(&amp;amp;quot;in&amp;amp;quot;);
        });
        return false;
    });
    
    // show recent messages only
    $$(&amp;amp;quot;.show_recent_only&amp;amp;quot;).addEvent('click', function(){
        this.hide();
        $$(&amp;amp;quot;.show_all_message&amp;amp;quot;).show()
        
        $$(&amp;amp;quot;.message_list li)&amp;amp;quot;).filter(function(el, i) {
            if (i&amp;amp;gt;4) el.slide(&amp;amp;quot;out&amp;amp;quot;);
        });
        
        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() {
    
    $$(&amp;amp;quot;.pane:even&amp;amp;quot;).addClass(&amp;amp;quot;alt&amp;amp;quot;);
    
    $$(&amp;amp;quot;.pane .btn-delete&amp;amp;quot;).addEvent('click', function(){
        if (confirm(&amp;amp;quot;This comment will be deleted!&amp;amp;quot;)) {
            
            var pane = this.getParent(&amp;amp;quot;.pane&amp;amp;quot;);
            pane
                .tween('background-color', '#fbc7c7')
                .get('tween')
                .chain(function(){
                      pane.fade(0);
                  }, function(){ 
                      pane.dispose();
                  });
        }
        return false;
    });

    $$(&amp;amp;quot;.pane .btn-unapprove&amp;amp;quot;).addEvent('click', function(){        
        var pane = this.getParent(&amp;amp;quot;.pane&amp;amp;quot;);         
        pane.highlight(&amp;amp;quot;#fff568&amp;amp;quot;)
            .addClass(&amp;amp;quot;spam&amp;amp;quot;);
        return false;
    });
    
    $$(&amp;amp;quot;.pane .btn-approve&amp;amp;quot;).addEvent('click', function(){
        var pane = this.getParent(&amp;amp;quot;.pane&amp;amp;quot;);
        pane.highlight(&amp;amp;quot;#dafda5&amp;amp;quot;)
            .removeClass(&amp;amp;quot;spam&amp;amp;quot;);
        return false;
    });
    
    $$(&amp;amp;quot;.pane .btn-spam&amp;amp;quot;).addEvent('click', function(){

        var pane = this.getParent(&amp;amp;quot;.pane&amp;amp;quot;);
        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() {
    $$(&amp;amp;quot;h2&amp;amp;quot;).grab(new Element('em'));
    
    $$(&amp;amp;quot;.thumbs a&amp;amp;quot;).addEvent('click', function(event){
    
        var largePath = this.get(&amp;amp;quot;href&amp;amp;quot;);
        var largeAlt =  this.get(&amp;amp;quot;title&amp;amp;quot;);
        
        $(&amp;amp;quot;largeImg&amp;amp;quot;).set({ 'src': largePath, 'alt': largeAlt });
        
        $$(&amp;amp;quot;h2 em&amp;amp;quot;).set(&amp;amp;quot;html&amp;amp;quot;, &amp;amp;quot; (&amp;amp;quot; + largeAlt + &amp;amp;quot;)&amp;amp;quot;);
        
        return false;
    });
});

Стилизируем ссылки

Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $=’.pdf’] { … }. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery (см. пример) :

Стилизируем ссылки

Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
Затем выберем все элементы <a> которые не содержат ссылки на “http://www.webdesignerwall.com” и не начинающиеся на “#” в “href”, затем добавим им класс “external” и устанавливаем target= “_blank”.

window.addEvent('domready', function() {
    
    $$(&amp;amp;quot;a[href$=pdf]&amp;amp;quot;).addClass(&amp;amp;quot;pdf&amp;amp;quot;);

    $$(&amp;amp;quot;a[href$=zip]&amp;amp;quot;).addClass(&amp;amp;quot;zip&amp;amp;quot;);

    $$(&amp;amp;quot;a[href$=psd]&amp;amp;quot;).addClass(&amp;amp;quot;psd&amp;amp;quot;);
    
    $$(&amp;amp;quot;a:not([href*=http://anton.shevchuk.name])&amp;amp;quot;)
        .filter(&amp;amp;quot;:not([href^=#])&amp;amp;quot;)
        .addClass(&amp;amp;quot;external&amp;amp;quot;)
        .set('target', &amp;amp;quot;_blank&amp;amp;quot;);
});

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

© Антон Шевчук 2007-2021