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

[@habracut]

Ссылки на демки битые, а статья понравилась — пишите еще.

[@Yarc]

Переложил все демки в архив.

[@habracut]

Если вы не против, зеркало:

Простой пример
Пример с анимацией размеров

[@Yarc]

Спасибо.

[@Ladygin]

Хорошее вступление, надеюсь это будет начало серии подобных статей о mootools.

[@Yarc]

Спасибо, тогда буду готовить статью о цепях последовательных эффектов.

[@sanchesfree]

кто теперь объяснит, стоит ли вообще задумывать о Mootools если уже юзаю jQuery? вроде jQuery тоже самое умеет?

[@sanchesfree]

я про разного рода анимации, у меня получалось =)

[@Yarc]

Выбор JS-фреймворка — дело сугубо личное и я ни в коем случае не говорю, что jQuery лучше или хуже Mootools, т.к. это в очередной раз привело бы к холивару. Я думаю, что эта статья будет интересна в первую очередь тем, кто еще не определился с выбором в пользу того или иного фреймворка и им будет полезно увидеть какие-либо примеры из мира Mootools, чтобы сравнить их с jQuery. Так уж получилось, что я использую Mootools, может быть потому что мне очень нравится Mootools download builder =)

[@sanchesfree]

:) да, удобная фишка, в EXT вроде подобие есть.
Просто я раньше думал что мутулс для эффектов специально заточено или еще чего… вот и спросил, может если делать анимацию, то лучше пожертвовать несколькими килобайтами пользователя и подгрузить мутулс к jquery…

[@VasilioRuzanni]

Да, вот только Ext, к сожалению, сам не отслеживает зависимости выбираемых компонентов.

[@silentroach]

а чем не нравится анимация в jQuery.UI?

[@Imenem]

Очень часто за тебя этот выбор делают разработчики CMS / CMF, которую предполагается использовать в проекте. Переписывать уже имеющиеся скрипты с одного фреймворка на другой- занятие долгое и неблагодарное. Проще научиться работать с другим js-фреймворком.

[@silentroach]

мутулс, как мы видим, тоже по-умолчанию этого не умеет.

[@silentroach]

jQuery.UI содержит неплохие инструменты для анимирования.

[@silentroach]

да, мне тоже UI кажется пока еще недоделанным.
но эффекты там вполне даже ничего — docs.jquery.com/UI/Effects
насчет модульности — мутулс, насколько я знаю, тоже сооружается из модулей и в Core анимации нет.

[@Xenkok]

Есть для этого jqModal. Но там код писали какие-то индусы, название перменных в одну букву, трудно читается.

[@silentroach]

не надо задумываться. jQuery не хуже.

[@Askin]

jQuery — eto super :)

[@up01]

Mootools, конечно, хорошо, но лично мне не понравилась слабая документация. Мне вот тоже по душе jQuery, в первую очередь из-за отличной документированности. Так сказать меньше преград при освоении.

[@Mertas]

Денис, ты что издеваешься? docs.mootools.net/

[@up01]

Хм, последний раз там было несколько меньше (после выхода 1.2). Зато у jQuery на каждую функцию живые примеры :). Да и за счет более крупного сообщества легче найти ответ на тот или иной вопрос.

[@Mertas]

Ой, ник перепутал, извиняюсь. Но несмотря на это, у mootools отличная документация.

[@mocksoul]

Mootools селекторы текут в IE. У нас сейчас обратный процесс, с Mootools перебираемся на jQuery, MooTools по сравнению с jQuery оказалась намноооого хуже.

Так что сидите смирно =).

Разве что о Dojo можно подумать.

[@sanchesfree]

спасибо, и всем выше тоже :)

[@ZloyKoldun]

Уже 2 года пользую Mootools и ни разу не видел, чтобы хоть что-нибудь не работало в IE. Не обижайтесь, но если селекторы «текут», меняйте программистов, а не фреймворк + ко всему по скорости работы Moo быстрее JQ и модульная схема (именно такая, когда к ядру добавляются модули, реализующие те или иные функциональные возможности, а не надстройки, реализующие эффекты все и сразу, вроде UI в JQ) это действительно круто

[@mocksoul]

при чём тут «работало» и «не работало». Текут в IE6 и IE7 (сделайте сотню элементов, навешайте ивенты и профильните в IE6, даже на пустой странице можно), с позиционированием касяки (с оффсетом) в Opera 9.27. В багтрекер загляните.

Селекторы в jQuery быстрее. Факт. А UI-хрень все равно руками пишем.

[@magmoro]

в getPosition есть баги также в opera9,5 и в ff3

[@maxshopen]

Считаю, что написано неплохо и имеет смысл активно продолжать. Спасибо.

[off: голосовать мне хабр не дает, наверно чего то нехватает :), так что только словесная поддержка]

[@barbuza]

1) для скрытых элементов правильнее использовать свойство display
2) для возможности использования в боевых условиях надо брать не уже существующий блок, а создавать новый
3) если пишем плагин для mootools — сначала смотрим как принято оформлять исходники именно в этой библиотеке

а в целом хорошо будет, если люди узнают что есть адекватные библиотеки, а не только jquery

[@Yarc]

1) Да, возможно. Но т.к. здесь элементы спозиционированы абсолютно, то на мой взгляд — без разницы.
2) Здесь я старался максимально просто написать класс, поэтому и CSS и создание элементов выделил из кода.
3) Согласен.

[@barbuza]

я и не предлагал втаскивать css в скрипты. только создание блока и контента в нем.

[@Bonch]

Yarc, я доработал ваш класс и исправил некоторые ошибки.

Что было сделано:

— MoodalBox теперь является синглетоном
— Позиционирование оверлея и окна теперь возложено на css. Javascript работает только для корректировки позиции окна.
— Динамическое создание оверлея и окна.

Изначально MoodalBox работал неправильно, если страница была длиной больше длины viewport'a браузера. Я спозиционировал окно и оверлей при помощи css и эта проблема исчезла.

Всё, что я добавил нового в класс, помечено моим ником.

Прошу учесть изменения)

И да, скачать новый код можно здесь: imaker.ru/repo/archive_bonch_edited.zip

[@Yarc]

За CSS спасибо, буду знать, а то я всегда решал проблемы динамической высоты с помощью JavaScript. Объясните только, зачем этот класс делать синглтоном?
И еще: идея не создавать элемент, а использовать имеющийся у меня возникла, когда я смотрел на стиль написания классов в самом Mootools. Возьмите любой класс, который реализует какой-либо эффект и увидите, что в его конструктор передается идентификатор элемента, с которым мы хотим работать. Таким образом исчезает проблема внедрения контента программно (в любом случае сверстать мало-мальски сложное окошко проще, чем создавать все его элементы программно), IMHO.

[@Bonch]

Синглетон — в данном случае для того, чтобы нельзя было несколько раз инстанцировать класс, что поможет избежать ошибок, если кто-то захочет это сделать. В принципе, от этого пожно отказаться, но с точки зрения ООП это правильный подход.

По второму вопросу. Элемент не следует создавать в тех случаях, когда вы хотите, чтобы при отключенном JS пользователь все же что-то увидел. Например, такой подход с передачей id элемента (или самого элемента) можно использовать при создании выпадающего меню, или как в случае с плагинами mootools для Accordion или Sortables.

[@Yarc]

В том проекте, для которого я писал подобный класс, мне как раз было необходимо несколько экземпляров класса. Например, один — для показа какой-нибудь формы, а другой для блокировки оверлеем элементов управления и отображения прогресса при асинхронных запросах.

[@Bonch]

И еще, если требуется динамически создать сложный элемент, то я сначала верстаю его и только потом создаю на JS. Важно не забывать про порядок вложенных элементов, которые мы создаем.

Здесь нам помогут el.inject(element. 'after|before|top|...') и закладка html в firebug (чтобы посмотреть порядок динамически создаваемых тагов).

[@Bonch]

А, еще забыл: добавил возможнось внедрять контент в окно.
Контент может быть как строкой (текстом), так и элементом (например, div'ом).

[@Rencom]

автор, развивай класс. На данный момент он выглядит ущербно ) встраивание информации всплывающего окна в код основного окна диковато, было бы неплохо ajax задействовать. В целом молодец, ждем продолжения…

[@Bonch]

Это ж просто пример, как написать класс-плагин на mootools. У автора не стояла задача сделать продакшн-плагин.

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

[@LawbreaK]

На счет хостинга — www.000webhost.com/

Хороший и бесплатный )

[@Yarc]

Именно на него я и выложил примеры. А в самый ответственный момент они закрыли сайт на проверку соответствия контента их правилам.

[@LawbreaK]

Можешь дать мне примеры в ЛС и я их на своем выложу.

[@Yarc]

Спасибо, но habracut уже выложил.

[@4upuk]

Я как раз еще не разбирался толком с яваскриптом и фреймворками для него, но меня всегда интересовали подобные эффекты.

Отличный топик, спасибо.

[@jetman]

Все здорово, но Jevix на хабре портит код «елочками».

[@mocksoul]

нахрен они его для кода включили-то? oO

[@mocksoul]

this.hide.bind -> this.hide.bindWithEvent. Не?

и терминология не верная — это у вас никакой не плагин, а просто «что-то» при помощи Mootools.

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

[@mocksoul]

кстати, что-то сразу не подумал. А ведь есть же уже mootools-more.js. Там есть модальные окна. Чего велосипед-то делать? =)

[@magmoro]

нет там никаких модальных окон.

[@mocksoul]

ай, пардон.

не mootools-more.js, а mootools-clientside.js

clientside.cnet.com/docs/UI/StickyWin.Modal

[@Yarc]

Тогда почему разработчики Mootools тот же Fx.Slide отнесли в раздел плагинов?

[@mocksoul]

потому что он очень много чего экстендит в самом mootools.

[@iBear]

А чем синтаксис подсвечивали?

[@Yarc]

Вроде многие тут подсвечивают на source.virtser.net/
Я тоже )) Правда немного глючная эта подсветка для HTML.

[@magmoro]

вместо
this.fx.overlayAnimation.start(0, this.options.destinationOverlayOpacity);
this.fx.elementAnimation.start(0, 1);
я бы сделал просто
this.fx.overlayAnimation.start(this.options.destinationOverlayOpacity);
this.fx.elementAnimation.start(1);
и в другом месте аналогично.

Также добавил бы link: cancel, хотя при большой скорости анимации, которая по умолчанию это не важно
new Fx.Tween(this.overlay, { property: 'opacity', link:'cancel' })

[@Yarc]

Спасибо за напоминание о link.

[@andrei202]

Столкнулся с тем, что window.getHeight() не определяет размер окна с контентом, а только размер окна браузера. Решается использованием функции getPageSize() с quirksmode.org:
function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
}

В вашем классе:

var a = getPageSize();
this.overlay.setStyles({
«top»: window.getScrollTop(),
«height»: a[1]
});