Как стать автором
Обновить
0

MooTools *

Cвободный JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Как MooTools jQuery заборол, или детектив в стиле Коломбо

Время на прочтение5 мин
Количество просмотров8.8K
Стек вызовов jQuery/MooTools По долгу работы в Айри я иногда разбираю ошибки функционирования сайта на сетевом уровне / уровне браузерного взаимодействия. Обычно это сводится к простому анализу заголовков запроса-ответа и воспроизведению тривиальных условий. Но иногда бывают интересные случаи.

Все начиналось холодным февральским вечером. Клиент написал о странной проблеме при ускорении сайта: слайд-шоу множилось и блокировало поведение сайта, страницы были недоступны. Через два дня после выяснения всех подробностей я узнал, почему Mootools и jQuery категорически нельзя использовать совместно. И подтвердился в мысли, что и «алкоголь — зло», и «eval — зло».

Но обо всем по порядку.
Читать дальше →
Всего голосов 12: ↑7 и ↓5+2
Комментарии8

Новости

Релиз MooTools 1.5

Время на прочтение2 мин
Количество просмотров8.5K
image

Mootools долгое время был неотъемлемой составляющей клиентского JavaScript на Habrahabr. Печально было наблюдать за угасанием творения Valerio Proietti. С мая 2013 года записи на блоге практически не добавлялись…

Но сегодня утром команда mootools выдала очередной релиз и добавила нотки оптимизма в сердца ценителей этого фреймворка.
Что же нового в mootools 1.5
Всего голосов 15: ↑15 и ↓0+15
Комментарии2

Moobile — основанный на MooTools фреймворк для мобильных устройств

Время на прочтение2 мин
Количество просмотров2.3K

Давненько ничего на хабре не слышно новостей о JS фреймворке MooTools. Между тем, он продолжает своё развитие. На данный момент последняя версия ядра — 1.4.5.

Однако сейчас разговор о другом. Ещё 20 апреля в своём твиттере разработчики сообщили, что с использованием ядра библиотеки начата разработка фреймворка для мобильных устройств.
Upd.1 — разрабатывают его не создатели MooTools, спасибо magmoro заметил неточность.

Итак moobilejs.com.
Читать дальше →
Всего голосов 26: ↑22 и ↓4+18
Комментарии18

MUX.Dialog плагин для красивых диалогов в вашем проекте

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

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

Читать дальше →
Всего голосов 34: ↑30 и ↓4+26
Комментарии25

Истории

Mootools плагин для анимации AJAX-запросов без gif'ов

Время на прочтение2 мин
Количество просмотров3.5K
Захотелось как-то сделать анимацию выполнения 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 и на моей виртуальной машине — слабее ничего не нашлось для тестов.
  • Наверняка в комментариях еще наберется...

А все остальное, как говорится, лучше один раз увидеть.
Смотреть
Всего голосов 34: ↑33 и ↓1+32
Комментарии20

Мутулз теперь немножко роднее

Время на прочтение2 мин
Количество просмотров4.2K

Йохохо, ребята! Наконец-то свершилось то, чего все так ждали! MooTools стал ближе ко всем людям, плохо знающим английский! Авторы локализовали его на множество языков и вы можете использовать любой из них, который вам ближе.

Уверен, это великий шаг в будущее. Порог вхождения в JavaScript-программирование существенно снизился.

Теперь можно писать на итальянском:

Element.impostaStile('colore', 'rosso');


Использовать британский английский вместо американского (а вы путались, как писать — 'colour' или 'color'? по-моему, это совершенно уберет неразбериху)

Element.setStyle('colour', 'red');


И, что самое главное, я теперь могу программировать на рідній мові!

Element.встановитиСтиль('колір', 'червоний')


Ниже есть расширенные примеры, а по ссылке вы обнаружите, что они работают просто прекрасно и это действительно то, чего мы так долго ждали. Просто нажмите play:

Читать дальше →
Всего голосов 50: ↑35 и ↓15+20
Комментарии31

MooTools 1.3

Время на прочтение4 мин
Количество просмотров2.6K
image
image
Вот и вышел долгожданный релиз MooTools 1.3. Расскажу немного об изменениях в самом фреймворке, и в его «окружении». Между версиями 1.2 и 1.3 довольно много различий, но обо всем по порядку.
Читать дальше →
Всего голосов 44: ↑40 и ↓4+36
Комментарии32

Яндекс.Виджет + adjustIFrameHeight + MooTools

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

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

Ниже я покажу, как довольно просто можно в обход Widget API управлять высотой фрейма, используя MooTools на стороне виджета.
Читать дальше →
Всего голосов 25: ↑21 и ↓4+17
Комментарии17

Русская документация по mootools 1.2

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

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

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

Полезные ссылки:
Всего голосов 63: ↑57 и ↓6+51
Комментарии31

Закладки для демонстрации исходников с подсветкой на вашей странице

Время на прочтение1 мин
Количество просмотров2K

Вы нашли немного времени для создания полезной программы/плагина/виджета/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 тоже подсвечивает, пример тут (последняя закладка)
Всего голосов 34: ↑29 и ↓5+24
Комментарии8

Пример создания анимированного меню

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

Читать дальше →
Всего голосов 39: ↑29 и ↓10+19
Комментарии18

Анимация в MooTools. Основы и не только.

Время на прочтение18 мин
Количество просмотров7.4K
В данном топике я собираюсь свести все свои знания об анимации в MooTools воедино и рассмотреть темы, более углубленные, чем просто примеры использования плагинов. Теоретическая информация справедлива не только для MooTools, но и для других фреймворков. Начинающим будет интересно ознакомиться с возможностями фреймворка, а продолжающим — понять, как все это работает :). В статье приведено много примеров, есть довольно оригинальные, вот некоторые из них: 1, 2, 3. Приятного вам чтения.
Заглянуть вовнутрь
Всего голосов 69: ↑62 и ↓7+55
Комментарии39

Делаем вращательный регулятор.

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

Sample
Итак, поехали
Всего голосов 104: ↑99 и ↓5+94
Комментарии72

Ближайшие события

19 августа – 20 октября
RuCode.Финал. Чемпионат по алгоритмическому программированию и ИИ
МоскваНижний НовгородЕкатеринбургСтавропольНовосибрискКалининградПермьВладивостокЧитаКраснорскТомскИжевскПетрозаводскКазаньКурскТюменьВолгоградУфаМурманскБишкекСочиУльяновскСаратовИркутскДолгопрудныйОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн
24 – 25 октября
One Day Offer для AQA Engineer и Developers
Онлайн
25 октября
Конференция по росту продуктов EGC’24
МоскваОнлайн
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань

Замена стандартного select с использованием Mootools

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

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

Однажды мне было необходимо кастомизировать select. Я использую mootools, поэтому, сразу пошел искать плагинчик для замены select'a — вдруг кто-то уже написал? Действительно, нашел несколько. Стал разбираться. Все просмотренные мною плагины оказались полной ерундой — они вели себя не как стандартный select. Выкинул их в помойку и решил написать свой плагин, который бы полностью повторял поведение стандартного select'a.
Читать дальше →
Всего голосов 52: ↑47 и ↓5+42
Комментарии76

Что происходит с MooTools

Время на прочтение3 мин
Количество просмотров1.1K
Ниже перевод сегодняшнего поста одного из разработчиков MooTools в google groups.

Я пишу этот пост в списке рассылки чтобы рассказать сообществу MooTools о том, что разработчики делали в эти дни, и что будет с фреймворком. Мы все устали от ответов на одни и те же вопросы снова и снова, поэтому я надеюсь, что этот пост сделает кое-что более ясным, и мы перестанем видеть одно и тоже, снова и снова в списке рассылки.
Читать дальше →
Всего голосов 37: ↑34 и ↓3+31
Комментарии24

Классовый мутатор Binds.

Время на прочтение3 мин
Количество просмотров1.7K
В обсуждении недавнего топика хабрасообщество заинтересовалось подробностями написания классов для MooTools и, в частности, мутаторами. В связи с этим мне захотелось что-нибудь написать на эту тему, пока не наткнулся на статью одного из разработчиков MooTools. В этом топике привожу перевод статьи, в которой Jan Kassens описывает пример использования классовых мутаторов.
Читать дальше →
Всего голосов 20: ↑19 и ↓1+18
Комментарии11

Классы в MooTools.

Время на прочтение6 мин
Количество просмотров3K
Создать свой класс в MooTools очень просто:
//Example 1
var someClass=new Class({

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

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

Читать дальше →
Всего голосов 62: ↑44 и ↓18+26
Комментарии43

Пишем свой MooTools-плагин.

Время на прочтение7 мин
Количество просмотров3K
Доброго времени суток.
Это мой первый серьезный пост на Хабре, так что критика приветствуется.
Сегодня я расскажу о написании плагина для JavaScript-библиотеки MooTools на примере модального всплывающего окна.
Итак, поехали
Всего голосов 76: ↑62 и ↓14+48
Комментарии61

Графики, Plotr и MooTools

Время на прочтение1 мин
Количество просмотров1.3K
Пока для JavaScript-фреймворка MooTools представлено мало качественных дополнений, а некоторые и вовсе не хотят работать с новой версией(1.2) последнего. Одним из таких дополнений является адаптация(ссылка 1, ссылка 2) библиотеки Plotr, позволяющей создавать линейные/круговые/столбчатые диаграммы.
Читать дальше →
Всего голосов 18: ↑14 и ↓4+10
Комментарии6

MooTools 1.2 — официальный релиз

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

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

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

Поздравляю команду MooTools, ну и всех кто этот фреймворк использует (себя в том числе). Доброе утро, Хабр!
Всего голосов 40: ↑33 и ↓7+26
Комментарии45
1

Вклад авторов