MooTools *

Этот плагин позволит вам легко и элегантно выводить сообщения и небольшие формы в ваших веб-проектах, построенных на Mootools.

Основные характеристики

1. Полнофунциональные диалоги. А значит из коробки работают модальность, многооконность, закрытие по Esc, перетаскивание, растягивание (опционально), удобный механизм добавления кнопок и другие вкусности. При этом все очень ненавязчиво.
2. Простой API для кастомизации и манипуляции диалогами.
3. Стилизация через CSS, что означает что многие, если не все свойства связанные с внешним видом и даже некоторые связаные с поведением можно переопределить в своих CSS файлах, а значит вы легко впишете диалоги в стиль своего проекта (см. примеры).
4. События позволят вам перехватывать ключевые моменты поведения диалогов и дополнять их собственным поведением.
5. Работает из коробки с MUX.Loaders, но не требует их если вы не хотите их использовать. Просто подключите файл лоадеров до диалогов и все — анимация сама запустится перед событием submit и остановится при закрытии.
6. Полная документация и примеры.

Проект на github https://github.com/lavmax/MUX.Dialog.

Тестировалось на IE7+, FF3+, Chrome, Safari, Opera последних версий.

Некоторые примеры использования и кастомизации

Захотелось как-то сделать анимацию выполнения ajax-запросов на чистом html+css и совсем без gif'ов. И сделал плагин для Mootools, который позволяет при добавлении одного файла Javascript получить различные по размеру, фону и типу анимированные иконки.

Плюсы:

• Легкие. Отдельно взятый элемент весит не больше gif'а, а использовать его можно многократно стилизируя под разные фрагменты сайта/приложения.
• Легко подключаются (см. пример ниже)
• Кроссбраузерные. В отличие от суперкрасивых но CSS3 подобных элементов эти тестировались на IE 7+, Firefos 3+, Opera 11, Safari, Chrome, Mobile Safari 4+ и Android 2.2. Скорее всего будут работать и на IE6, Opera 10 и старших версиях Safari и Chrome, но не тестировалось.
• Один файл для всех анимированных иконок сайта, а не отдельный gif на каждую ситуацию.
• Базовый класс можно расширять дописывая свои анимации.
• Это не связанно непосредственно с технологией, но тоже редко встречал, поэтому добавлю — некоторые анимации имеют режим in и out, что удобно для визуализации POST и GET запросов соответственно.
• Я почему-то с детства не люблю анимированные gif'ы

И минусы:

• В IE 9 элементы все равно оставлены квадратными. Хоть border-radius в нем и поддерживается, но имеет место баг (или фича) связанный с заливкой, который сходу обойти не удалось. Может кто подскажет как это можно сделать.
• Теоретически может притормаживать на слабых машинах на старом браузере под нагрузкой. В тестах это не проявилось, но жизнь, как известно, от тестов отличается. Тестировалось на слабеньком нетбуке в IE 8 в режиме IE 7 и на моей виртуальной машине — слабее ничего не нашлось для тестов.
• Наверняка в комментариях еще наберется...

А все остальное, как говорится, лучше один раз увидеть.

Вот и вышел долгожданный релиз MooTools 1.3. Расскажу немного об изменениях в самом фреймворке, и в его «окружении». Между версиями 1.2 и 1.3 довольно много различий, но обо всем по порядку.

По данным летнего опроса на habrahabr, на mootools програмируют около 8% разработчиков. Понятно, что чем популярнее фреймворк, тем быстрее и качественнее он развивается, тем больше плагинов под него появляется в сети. Можем ли мы как либо влиять на эту цифру? Я думаю, можем!

Основой любого хорошего фреймворка, является конечно же его функционал. Но есть другие важные факторы влияющие на популярность: размер кода, скорость работы фреймворка и, как не парадоксально, документация! Если функционал не описан, только единицы смогут поковыряться в исходниках и найти заветный метод или плагин.

Разработчики MooTools неплохо поработали над документацией, но в сети она доступна только на английском. Ну вот я и решил исправить ситуацию. Сейчас полностью переведена только секция Core, остальные секции пока что находятся в процессе перевода. Вот я и решил обратиться к Вам, уважаемые разработчики, принять участие в переводе (кого заинтересовало мое предложение пишите мне на oleg точка cherniy at Гмейл.ком).

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

• Текущий вариант перевода документации по MooTools
• Обсуждение перевода на тематической google-группе
• Исходный код, а также инстукция по установке доки на свой компьютер

В данном топике я собираюсь свести все свои знания об анимации в MooTools воедино и рассмотреть темы, более углубленные, чем просто примеры использования плагинов. Теоретическая информация справедлива не только для MooTools, но и для других фреймворков. Начинающим будет интересно ознакомиться с возможностями фреймворка, а продолжающим — понять, как все это работает :). В статье приведено много примеров, есть довольно оригинальные, вот некоторые из них: 1, 2, 3. Приятного вам чтения.

Этим топиком я продолжаю цикл статей о написании всяких вкусностей для MooTools. Сегодня мы на чистом JavaScript сделаем вращательный регулятор — контрол, который часто используют в работающих со звуком программах для регулировки громкости или баланса. Вот примерно такой:

Иногда бывает нужно заменить стандартный HTML элемент select своим.
Обычно это необходимо, если фантазия дизайнера разыгралась и он нарисовал «кастомизированный» select и настаивает, чтобы было реализовано как он того захотел. Ну что ж, надо — сделаем.

Небольшая предыстория.

Однажды мне было необходимо кастомизировать select. Я использую mootools, поэтому, сразу пошел искать плагинчик для замены select'a — вдруг кто-то уже написал? Действительно, нашел несколько. Стал разбираться. Все просмотренные мною плагины оказались полной ерундой — они вели себя не как стандартный select. Выкинул их в помойку и решил написать свой плагин, который бы полностью повторял поведение стандартного select'a.

Ниже перевод сегодняшнего поста одного из разработчиков MooTools в google groups.

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

Создать свой класс в MooTools очень просто:

//Example 1
var someClass=new Class({

   initialize: function(){
      alert('Hello, world!');
   }

});* This source code was highlighted with Source Code Highlighter.

Доброго времени суток.
Это мой первый серьезный пост на Хабре, так что критика приветствуется.
Сегодня я расскажу о написании плагина для JavaScript-библиотеки MooTools на примере модального всплывающего окна.

JavaScript framework MooTools официально объявил о релизе версии 1.2 — она довольно долго была в разработке и, буквально этой ночью, официальный сайт пролил свет (в прямом смысле — дизайн главной страницы заметно изменился, сменив черный и темно-синие цветы на белые и светло-серые тона) и объявил о релизе.

На данный момент работает только главная страница проекта, но ведь cкачать-то можно уже сейчас. (с) надпись там же.

Хотя на главной странице ссылка на документацию по версии 1.2 не появилась, но сама документация находится тут (и, кстати, доступна).

Поздравляю команду MooTools, ну и всех кто этот фреймворк использует (себя в том числе). Доброе утро, Хабр!