Этот плагин позволит вам легко и элегантно выводить сообщения и небольшие формы в ваших веб-проектах, построенных на 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 довольно много различий, но обо всем по порядку.

Moo!

Пару месяцев назад, в ходе работы над клиентом CRM-системы одной MLM-фирмы, мне понадобился компонент, реализующий простейший TableGrid. Найти такой компонент оказалось не из простых.

Многие знают о такой клёвой штуке как Яндекс.Виджет.
Сделать свой функциональный виджет проще простого, достаточно написать серверный виджет и подключить его к Яндекс.Виджет через iframe.

Для управления виджетом Яндекс предоставляет API в виде JS объекта widget, в частности с помощью него можно изменять высоту фрейма под динамический контент (adjustIFrameHeight), это позволяет избавиться от вертикальной полосы прокрутки. Но у этого API есть существенный минус — он написан с использованием jQuery, что лишает разработчиков виджетов на MooTools использовать Widget API.

Ниже я покажу, как довольно просто можно в обход Widget API управлять высотой фрейма, используя MooTools на стороне виджета.

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

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

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

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

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

Вы нашли немного времени для создания полезной программы/плагина/виджета/css-файла/html-кода, но на оформление (как всегда) времени осталось минимум?

Тогда предлагаю воспользоваться моим плагином, c помощью которого вы потратите минимум времени на презентабельную демонстрацию ваших исходников прямо у себя на Web-странице. Вот как это выглядит.

Поддерживается C-подобный синтаксис, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript и Makefiles. С помощью расширений можно включить поддержку LISP, Haskell, LUA, OCAML, SML, F#, Visual Basic, SQL, Protocol Buffers и WikiText.

Я не писал все ”с нуля”, для подсветки использовал библиотеку Prettify, которую успешно можно подключать как самостоятельный модуль (она написана на чистом JavaScript).

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

• Документация по подключению RIA SourceTabs
• Скачать RIA SourceTabs с примером
• Библиотека для подсветки кода Prettify

UPD: PHP тоже подсвечивает, пример тут (последняя закладка)

В своей работе я часто сталкиваюсь с однотипными задачами. Для того чтобы не топтаться на одном месте, развиваться как разработчик, да и просто не скучать от однотипной работы, я придумываю небольшие фишки в проектах.
Так, при создании админки для одного из моих клиентов, я решил сделать анимированное меню при помощи фреймворка Mootools. В этой статье я расскажу, как создавалось меню и немного опишу функции и методы фреймворка, которые мне в этом помогли. Статья написана как для людей, которые только начинают изучение mootools, так и для тех, кто желает начать изучение этого фреймворка, но, возможно, не знают с чего начать.