Буквально на днях вышел стабильный релиз Mootools 1.2, который содержит массу новых возможностей и несколько измененный API. Чтобы было легче в нем ориентироваться, советую скачать новый cheat sheet:

Источник: mediaVROG blog.

В одной из прошлых статей я писал об основах программирования с использованием Mootools, а именно о работе с элементами и событиями. В этом уроке речь пойдет о несколько более сложной теме – объектно-ориентированном программировании, в частности о создании классов и объектов, а также о наследовании. В качестве примера я покажу процесс создания класса SlideShow (для отображения слайдов) и двух его дочерних классов – ImageSlideShow (для показа изображений) и RssSlideShow (для показа лент новостей).

<< читать дальше >>

Слово Roar переводится с английского как “орать”. Именно такое громкое название придумали для виджета, который тихонечко появляется в уголочке и показывает нам разные оповещения, уведомления, сообщения об ошибках и т.п. Создан он на основе библиотеки Mootools, и работает на всех основных браузерах.

Минимальные требования – Mootools 1.2, который должен иметь следующие дополнения: Element.Dimensions, Fx.Tween, Fx.Morph, Selectors, DomReady (необязательно).

На сайте автора приведены три примера использования виджета, код одного из них я публикую без изменений:

window.addEvent('load', function() {

	var roar = new Roar({
		position: 'lowerLeft',
		duration: 5000 // сообщение показывается 5 секунд
	});

	roar.alert('Britney Spears meets Frankenstein', 'The Beast and the Beauty, who is who!');

	roar.chain(function() {
		roar.alert('News gone crazy', 'Frankenstein is lost!');
	}).chain(function() {
		roar.alert('Frankenstein dead!', 'Who did it, we know it!');
	}).chain(function() {
		roar.alert('We fired our editor!', 'He only wrote stupid lorem ipsum dummies, hopefully we get better texts for the next showcase!');
	});
 });

В этом примере, сначала создается новый объект Roar, с параметрами position=’lowerLeft’ (всплывающее окно будет появляться внизу) и duration = 5000 (окно будет отображаться 5 секунд). Затем вызывается метод roar.alert(), который собственно и показывает сообщения. Он принимает 2 параметра – заголовок и текст сообщения. Далее, используя метод chain() выводятся последовательно три других сообщения. Посмотреть этот пример можно здесь.

перейти на сайт проекта

Морфинг, это визуальный эффект, позволяющий плавно преобразовать внешний вид одного элемента в другой. Это не самый распространенный эффект, но тем не менее иногда бывает очень кстати.

В Mootools, морфинг выполняется при помощи класса Fx.Morph, который имеет следующий синтаксис:

var myFx = new Fx.Morph(element[, options]);

Здесь, element – элемент, или его ID; options – дополнительные опции, как то скорость преобразования (duration) и его тип (transition).

Преобразование выполняется при помощи функции Morph.start(), которая принимает в качестве аргумента либо имя класса, либо объект со стилями, которые необходимо установить для объекта:

var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': 100,
    'width': 300
});

В этом примере, для скорости указан параметр “short”, что значит быстрый переход, для параметра transition установлено значение Sine.easeOut (подробнее о нем см. здесь). В функцию start() передан объект с двумя свойствами height и width, это значит что объект изменит размер с текущих значений высоты до 100 и 300 пикселей соответственно.

<< читать дальше >>

Не так давно я написал заметку о reflection.js – скрипте, создающем зеркальные отражения для изображений. Пару дней назад я нашел похожий скрипт Reflection.js for Mootools, который может делать то же самое, но с библиотекой Mootools, а вчера наткнулся на еще более продвинутый скрипт – reflex.js. Помимо создания простого отражения, reflex.js может поворачивать их вокруг своей оси, создавая эффект Cover Flow.

Параметры прозрачности, отступ отражения, границы изображений, углы наклона – всё это очень легко настраивается. Нужно просто указать необходимые классы для изображений.

Дополнительно, в дистрибутиве имеется скрипт cvi_reflex_lib.js, который добавляет еще больше гибкости. Подключив его вместо reflex.js, вы сможете заставить изображения реагировать на действия пользователя – например, если пользователь наводит мышкой на изображение, ее тень изменяет прозрачность, а изображение слегка поворачивается.

Скачать скрипт и посмотреть демо и инструкции можно здесь. Также советую посмотреть список проектов на этом же сайте: http://www.netzgesta.de/cvi/. Все перечисленные там скрипты (их там 12), предназначены для придания специальных эффектов изображениям – создание закругленных углов, превращение изображений в слайды, создание изображений с размытыми границами и многое другое.