Этот плагин позволит вам легко и элегантно выводить сообщения и небольшие формы в ваших веб-проектах, построенных на Mootools.
Основные характеристики
- Полнофунциональные диалоги. А значит из коробки работают модальность, многооконность, закрытие по Esc, перетаскивание, растягивание (опционально), удобный механизм добавления кнопок и другие вкусности. При этом все очень ненавязчиво.
- Простой API для кастомизации и манипуляции диалогами.
- Стилизация через CSS, что означает что многие, если не все свойства связанные с внешним видом и даже некоторые связаные с поведением можно переопределить в своих CSS файлах, а значит вы легко впишете диалоги в стиль своего проекта (см. примеры).
- События позволят вам перехватывать ключевые моменты поведения диалогов и дополнять их собственным поведением.
- Работает из коробки с MUX.Loaders, но не требует их если вы не хотите их использовать. Просто подключите файл лоадеров до диалогов и все — анимация сама запустится перед событием
submit и остановится при закрытии.
- Полная документация и примеры.
Проект на 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 стал ближе ко всем людям, плохо знающим английский! Авторы локализовали его на множество языков и вы можете использовать любой из них, который вам ближе.
Уверен, это великий шаг в будущее. Порог вхождения в JavaScript-программирование существенно снизился.
Теперь можно писать на итальянском:
Element.impostaStile('colore', 'rosso');
Использовать британский английский вместо американского (а вы путались, как писать — 'colour' или 'color'? по-моему, это совершенно уберет неразбериху)
Element.setStyle('colour', 'red');
И, что самое главное, я теперь могу программировать на рідній мові!
Element.встановитиСтиль('колір', 'червоний')
Ниже есть расширенные примеры, а по ссылке вы обнаружите, что они работают просто прекрасно и это действительно то, чего мы так долго ждали. Просто нажмите play:
Вот и вышел долгожданный
релиз MooTools 1.3. Расскажу немного об изменениях в самом фреймворке, и в его «окружении». Между версиями 1.2 и 1.3 довольно много различий, но обо всем по порядку.
12 октября 2010, 15:36
31
НЛО прилетело и опубликовало эту надпись здесь.
Многие знают о такой клёвой штуке как
Яндекс.Виджет.
Сделать свой функциональный виджет проще простого, достаточно написать серверный виджет и подключить его к Яндекс.Виджет через
iframe.
Для управления виджетом Яндекс предоставляет API в виде JS объекта
widget, в частности с помощью него можно изменять высоту фрейма под динамический контент (adjustIFrameHeight), это позволяет избавиться от вертикальной полосы прокрутки. Но у этого API есть существенный минус — он написан с использованием
jQuery, что лишает разработчиков виджетов на
MooTools использовать Widget API.
Ниже я покажу, как довольно просто можно в обход Widget API управлять высотой фрейма, используя MooTools на стороне виджета.
По данным
летнего опроса на habrahabr, на mootools програмируют около
8% разработчиков. Понятно, что чем популярнее фреймворк, тем быстрее и качественнее он развивается, тем больше плагинов под него появляется в сети. Можем ли мы как либо влиять на эту цифру? Я думаю, можем!
Основой любого хорошего фреймворка, является конечно же его функционал. Но есть другие важные факторы влияющие на популярность: размер кода, скорость работы фреймворка и, как не парадоксально, документация! Если функционал не описан, только единицы смогут поковыряться в исходниках и найти заветный метод или плагин.
Разработчики MooTools неплохо поработали над документацией, но в сети она доступна только на английском. Ну вот я и решил исправить ситуацию. Сейчас полностью переведена только секция
Core, остальные секции пока что находятся в процессе перевода. Вот я и решил обратиться к Вам, уважаемые разработчики, принять участие в переводе (кого заинтересовало мое предложение пишите мне на oleg точка cherniy at Гмейл.ком).
Полезные ссылки:
15 февраля 2009, 20:31
69
Вы нашли немного времени для создания полезной программы/плагина/виджета/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).
Полезные ссылки
UPD: PHP тоже подсвечивает, пример
тут (последняя закладка)
В своей работе я часто сталкиваюсь с однотипными задачами. Для того чтобы не топтаться на одном месте, развиваться как разработчик, да и просто не скучать от однотипной работы, я придумываю небольшие фишки в проектах.
Так, при создании админки для одного из моих клиентов, я решил сделать анимированное
меню при помощи фреймворка Mootools. В этой статье я расскажу, как создавалось меню и немного опишу функции и методы фреймворка, которые мне в этом помогли. Статья написана как для людей, которые только начинают изучение mootools, так и для тех, кто желает начать изучение этого фреймворка, но, возможно, не знают с чего начать.
31 октября 2008, 14:41
33
В данном топике я собираюсь свести все свои знания об анимации в MooTools воедино и рассмотреть темы, более углубленные, чем просто примеры использования плагинов. Теоретическая информация справедлива не только для MooTools, но и для других фреймворков. Начинающим будет интересно ознакомиться с возможностями фреймворка, а продолжающим — понять, как все это работает :). В статье приведено много примеров, есть довольно оригинальные, вот некоторые из них:
1,
2,
3. Приятного вам чтения.
28 октября 2008, 12:27
86
