Mootools - несколько простых примеров работы

, с изменяющейся прозрачностью от opacity= 1.0 до opacity=0.0, высота элемента будет также изменена до 0:

Квак! window.addEvent('domready', function() { $$(".pane .delete").addEvent('click', function(event){ $(this).getParent().dissolve(); }); });

Гармошка

Пример реализации “гармошки”.




В 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), onBackground: function(toggler, element) });

Еще одна гармошка

Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку.

Квак! 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

Пример поможет создать миленькую такую анимацию для события hover


Когда мышка находится над элементом (mouseover), скрипт ищет следующий элемент

Квак! <em>

, и рендерит его прозрачность и расположение:

Квак! window.addEvent('domready', function() { $$(".menu a").addEvents({ 'mouseover':function() {             this.getNext("em").setStyles().morph(); }, 'mouseout':function() { this.getNext("em").morph(); } }) });

Еще одна анимашка для события hover #2

Здесь для формирования подсказки пользуем linktitle



Когда стрясется mouseover, берется содержимое из атрибута “title” и вонзается в свежесозданный

Квак! <em>

:

Квак! window.addEvent('domready', function() { $$(".menu2 a").addEvents({ 'mouseover':function() { var em = new Element('em', ); this.getParent().grab(em);           this.getNext("em").setStyles().morph(); }, 'mouseout':function() { this.getNext("em").morph().chain(function()); } }); });

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

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



Создадим список

Квак! <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; }); });

Галерея изображений

Реализации галерейки не требующей перезагружать страницу:



Присобачиваем

Квак! <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(); $$("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"); });