Продовжимо вивчати JavaScript фреймворки. Настала черга MooTools…

О так, будемо переробляти знайомий приклад ще й під Mootools 🙂

Підключення

Ну, для початку беремо фреймворк, його ви зможете завантажити з домашньої сторінки проекту, та підключаємо:

Mootools так само доступний в Google CDN JavaScript для бібліотек:

Як отримати елемент з допомогою MooTools?

Для отримання елементів в MooTools існує дві функції:

  • $(“id”) – за допомогою функції $ можна отримати елемент за його id
  • $$(“.class”) – функція $$ вибирає масив елементів використовуючи селектори CSS
  • Як і більшість інших JavaScript-фреймворків, MooTools спирається на селектори CSS описані в W3C стандарті, погляньте на діаграму:

    Ще трохи прикладів:

    • $(“header”) – отримання елемент з id=”header”
    • $$(“#header”) – повертає масив, першим елементів якого буде елемент з id=”header”
    • $$(“h3”) – отримати всі

      елементи

    • $$(“h3”, “h4”) – отримати всі

      і

      елементи

    • $$(“h3, h4”) – отримати всі

      і

      елементи (зверніть увагу на відмінності з попереднім прикладом)

    • $$(“div#content .photo”) – отримати всі елементи з класом =”photo” які знаходяться в елементі div id=”content”
    • $$(“ul li”) – отримати всі
    • елементи зі списку
      • $$(“ul li:first-child”) – отримати тільки перший елемент
      • зі списку
        • $(“content”).getElements(“p.sel) – отримати елементи

          з класом 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;
        });
        });

         

        Магічні зникнення

        Цей приклад покаже як можна красиво і легко прибирати елементи з сторінки (див. приклад):

        Коли ми клікаємо по картинці , буде знайдено батьківський елемент
        і його прозорість буде повільно змінюватися від opacity= 1.0 до opacity=0.0, так само буде зміняться висота елемента до 0:

        window.addEvent(‘domready’, function() {
        $$(“.pane .delete”).addEvent(‘click’, function(event){
        $(this).getParent().dissolve();
        });
        });

        Пов’язана анімація

        Тепер приклад складніше, але він допоможе Вам краще зрозуміти анімацію в MooTools. Усього кілька рядків коду змусять квадрат рухатися, змінювати розмір і прозорість. (див. приклад):

      • коли завантажиться сторінка і DOM буде готовий до маніпуляцій
      • прив’язуємося до події click для елемента
      • будемо маніпулювати елементом
      • створюємо об’єкт 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), відбувається пошук наступного елемента , і анимируется його прозорість і розташування:

        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” вставимо в новостворений тег :

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

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

        Цей приклад демонструє, як зробити кликабельним блок з текстом, а не тільки посилання (див. приклад):

        Створимо список

          з класом class=”pane-list” і ми хочемо зробити елементи

        • клікабельними. Для початку прикуємося до події click для елемента “.pane-list li”; коли користувач буде клікати по елементу списку, наша функція зробить пошук тега і зробить редирект на сторінку зазначену в атрибуті href.

          window.addEvent(‘domready’, function() {
          $$(“.pane-list li”).addEvent(‘click’, function(){
          window.location = this.getElement(“a”).get(“href”);
          return false;
          });
          });

          Складаються панельки

          Ну а тепер трохи комбінуємо попередні приклади і створимо ряд складаються панельок (див. приклад):

           

          • покриваємо всі елементи
            після першого.
          • покриваємо всі елементи
          • після четвертого
          • клік по

            – викликає метод toggle() для наступного елемента

          • клік по – викликає метод slideOut для всіх
          • клік по – приховує елемент, і відображає , так само викликається метод slide(‘in’) для всіх
          • після четвертого
          • клік по – приховує елемент, і відображає , так само викликається метод slide(‘out’) для всіх
          • після четвертого

          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 навіщо-то обертає елемент який необхідно слайдити в додатковий
          – через це виникає низка проблем

          Імітація Backend’a wordpress’a

          Я думаю багато хто з читачів стикалися з адмінської частиною wordpress’a, точніше з редагування коментарів. Спробуємо зробити щось подібне. Для анімації фонового кольору нам знадобитися відповідний плагін для jQuery. (див. приклад):

          • додамо клас “alt” до кожного елементу парним
            (даний клас змінює колір фону елемента)
          • клік по ініціює появу діалогу (confirm), так само відбувається анімація фонового кольору і прозорості (backgroundColor і opacity) для
            потім елемент видаляється з DOMа
          • клік по – викликає анімацію фону у
            (колір змінюється на жовтий і назад) і додає клас “spam”
          • клік по – викликає анімацію фону у
            (колір змінюється на зелений і назад) і видаляє клас “spam”
          • клік по – викликає анімацію фону у
            (колір змінюється на червоний), і змінює параметр 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.виділення”#fff568″)
          .addClass(“spam”);
          return false;
          });
          $$(“.pane .btn-approve”).addEvent(‘click’, function(){
          var pane = this.getParent(“.pane”);
          pane.виділення”#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;
          });
          });

          Галерея зображень

          Найпростіший приклад реалізації галереї, без перезавантаження сторінки (див. приклад):

          Для початку додамо тег в заголовки

          По кліку на зображення

          виконуємо наступні дії:

          • зберігаємо значення атрибута href у змінній “largePath”
          • зберігаємо значення атрибута “title” змінної “largeAlt”
          • замінюємо в елементі значення атрибута “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 (див. приклад) :

          Для початку додамо клас для кожного посилання, у відповідності з типом файлу.
          Потім виберемо всі елементи які не містять посилання на “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 – корисно