Случайный альбом
KUBANA-2011
Некультурный отдых - KUBANA-2011
Изображений: 67
Flash Point 2011
Некультурный отдых - Flash Point 2011
Изображений: 77
Меточки:
Нацарапано:  03.11.2009
Категория: Работа
Метки новости:
Mootools — это javascript фреймворк, один из самых популярных.
Явный конкурент script.aculo.us

mootools-1.2.4-core-nc.zip

Как получить элемент с помощью MooTools?


Подключение

Ну, для начала берем фреймворк и подключаем:


code]##САНИРОВАННЫЙ## type="text/javascript" src="js/mootools.js" >##САНИРОВАННЫЙ##>[/code]Чтобы получить элемент в 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=”co ntent”
$$(”ul li”)  – получить все <li> элементы из списка <ul>$$(”ul li:first- child”)  – получить только первый элемент <li> из списка <ul>$(”cont ent”).getElements(”p.sel”)
 – получить элементы <p> с классом sel,
которые находятся внутри элемента с id=”content”
$$(”#content”).getParent()  – получить предка элемента с id=”content”


Слайд-панель

Простой пример – слайд-панель, которая будет двигаться вверх-вниз по клику на кнопке



Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (будет “мигать” класс “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 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");
});


Звиздец рекомендует поделиться ссылкой с камрадами и откомментить эту заметку:
для печатиПечатай!  
 
ZviZdeZ.ru
Придет серенький Фенрир и укусит нас за мир

2009-2011©