Pull to refresh

Comments 61

Ссылки на демки битые, а статья понравилась — пишите еще.
Хорошее вступление, надеюсь это будет начало серии подобных статей о mootools.
Спасибо, тогда буду готовить статью о цепях последовательных эффектов.
кто теперь объяснит, стоит ли вообще задумывать о Mootools если уже юзаю jQuery? вроде jQuery тоже самое умеет?
UFO landed and left these words here
я про разного рода анимации, у меня получалось =)
Выбор JS-фреймворка — дело сугубо личное и я ни в коем случае не говорю, что jQuery лучше или хуже Mootools, т.к. это в очередной раз привело бы к холивару. Я думаю, что эта статья будет интересна в первую очередь тем, кто еще не определился с выбором в пользу того или иного фреймворка и им будет полезно увидеть какие-либо примеры из мира Mootools, чтобы сравнить их с jQuery. Так уж получилось, что я использую Mootools, может быть потому что мне очень нравится Mootools download builder =)
:) да, удобная фишка, в EXT вроде подобие есть.
Просто я раньше думал что мутулс для эффектов специально заточено или еще чего… вот и спросил, может если делать анимацию, то лучше пожертвовать несколькими килобайтами пользователя и подгрузить мутулс к jquery…
Да, вот только Ext, к сожалению, сам не отслеживает зависимости выбираемых компонентов.
Очень часто за тебя этот выбор делают разработчики CMS / CMF, которую предполагается использовать в проекте. Переписывать уже имеющиеся скрипты с одного фреймворка на другой- занятие долгое и неблагодарное. Проще научиться работать с другим js-фреймворком.
мутулс, как мы видим, тоже по-умолчанию этого не умеет.
UFO landed and left these words here
jQuery.UI содержит неплохие инструменты для анимирования.
UFO landed and left these words here
да, мне тоже UI кажется пока еще недоделанным.
но эффекты там вполне даже ничего — docs.jquery.com/UI/Effects
насчет модульности — мутулс, насколько я знаю, тоже сооружается из модулей и в Core анимации нет.
Есть для этого jqModal. Но там код писали какие-то индусы, название перменных в одну букву, трудно читается.
Mootools, конечно, хорошо, но лично мне не понравилась слабая документация. Мне вот тоже по душе jQuery, в первую очередь из-за отличной документированности. Так сказать меньше преград при освоении.
Хм, последний раз там было несколько меньше (после выхода 1.2). Зато у jQuery на каждую функцию живые примеры :). Да и за счет более крупного сообщества легче найти ответ на тот или иной вопрос.
Ой, ник перепутал, извиняюсь. Но несмотря на это, у mootools отличная документация.
Mootools селекторы текут в IE. У нас сейчас обратный процесс, с Mootools перебираемся на jQuery, MooTools по сравнению с jQuery оказалась намноооого хуже.

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

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

Селекторы в jQuery быстрее. Факт. А UI-хрень все равно руками пишем.
в getPosition есть баги также в opera9,5 и в ff3
Считаю, что написано неплохо и имеет смысл активно продолжать. Спасибо.

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

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

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

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

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

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

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

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

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

Здесь нам помогут el.inject(element. 'after|before|top|...') и закладка html в firebug (чтобы посмотреть порядок динамически создаваемых тагов).
А, еще забыл: добавил возможнось внедрять контент в окно.
Контент может быть как строкой (текстом), так и элементом (например, div'ом).
автор, развивай класс. На данный момент он выглядит ущербно ) встраивание информации всплывающего окна в код основного окна диковато, было бы неплохо ajax задействовать. В целом молодец, ждем продолжения…
Это ж просто пример, как написать класс-плагин на mootools. У автора не стояла задача сделать продакшн-плагин.

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

Отличный топик, спасибо.
Все здорово, но Jevix на хабре портит код «елочками».
нахрен они его для кода включили-то? oO
this.hide.bind -> this.hide.bindWithEvent. Не?

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

Плагины подразумевают расширение функционала, которое будет доступно без дополнительных манипуляций. Ну например добавление функционала к Element.
кстати, что-то сразу не подумал. А ведь есть же уже mootools-more.js. Там есть модальные окна. Чего велосипед-то делать? =)
нет там никаких модальных окон.
Тогда почему разработчики Mootools тот же Fx.Slide отнесли в раздел плагинов?
потому что он очень много чего экстендит в самом mootools.
Вроде многие тут подсвечивают на source.virtser.net/
Я тоже )) Правда немного глючная эта подсветка для HTML.
вместо
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' })
Спасибо за напоминание о link.
Столкнулся с тем, что 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]
});
Sign up to leave a comment.

Articles