Комментарии 61
Ссылки на демки битые, а статья понравилась — пишите еще.
Переложил все демки в архив.
Хорошее вступление, надеюсь это будет начало серии подобных статей о mootools.
кто теперь объяснит, стоит ли вообще задумывать о Mootools если уже юзаю jQuery? вроде jQuery тоже самое умеет?
я про разного рода анимации, у меня получалось =)
Выбор JS-фреймворка — дело сугубо личное и я ни в коем случае не говорю, что jQuery лучше или хуже Mootools, т.к. это в очередной раз привело бы к холивару. Я думаю, что эта статья будет интересна в первую очередь тем, кто еще не определился с выбором в пользу того или иного фреймворка и им будет полезно увидеть какие-либо примеры из мира Mootools, чтобы сравнить их с jQuery. Так уж получилось, что я использую Mootools, может быть потому что мне очень нравится Mootools download builder =)
:) да, удобная фишка, в EXT вроде подобие есть.
Просто я раньше думал что мутулс для эффектов специально заточено или еще чего… вот и спросил, может если делать анимацию, то лучше пожертвовать несколькими килобайтами пользователя и подгрузить мутулс к jquery…
Просто я раньше думал что мутулс для эффектов специально заточено или еще чего… вот и спросил, может если делать анимацию, то лучше пожертвовать несколькими килобайтами пользователя и подгрузить мутулс к jquery…
Очень часто за тебя этот выбор делают разработчики CMS / CMF, которую предполагается использовать в проекте. Переписывать уже имеющиеся скрипты с одного фреймворка на другой- занятие долгое и неблагодарное. Проще научиться работать с другим js-фреймворком.
мутулс, как мы видим, тоже по-умолчанию этого не умеет.
jQuery.UI содержит неплохие инструменты для анимирования.
да, мне тоже UI кажется пока еще недоделанным.
но эффекты там вполне даже ничего — docs.jquery.com/UI/Effects
насчет модульности — мутулс, насколько я знаю, тоже сооружается из модулей и в Core анимации нет.
но эффекты там вполне даже ничего — docs.jquery.com/UI/Effects
насчет модульности — мутулс, насколько я знаю, тоже сооружается из модулей и в Core анимации нет.
Есть для этого jqModal. Но там код писали какие-то индусы, название перменных в одну букву, трудно читается.
не надо задумываться. jQuery не хуже.
jQuery — eto super :)
Mootools, конечно, хорошо, но лично мне не понравилась слабая документация. Мне вот тоже по душе jQuery, в первую очередь из-за отличной документированности. Так сказать меньше преград при освоении.
Денис, ты что издеваешься? docs.mootools.net/
Ой, ник перепутал, извиняюсь. Но несмотря на это, у mootools отличная документация.
Mootools селекторы текут в IE. У нас сейчас обратный процесс, с Mootools перебираемся на jQuery, MooTools по сравнению с jQuery оказалась намноооого хуже.
Так что сидите смирно =).
Разве что о Dojo можно подумать.
Так что сидите смирно =).
Разве что о Dojo можно подумать.
спасибо, и всем выше тоже :)
Уже 2 года пользую Mootools и ни разу не видел, чтобы хоть что-нибудь не работало в IE. Не обижайтесь, но если селекторы «текут», меняйте программистов, а не фреймворк + ко всему по скорости работы Moo быстрее JQ и модульная схема (именно такая, когда к ядру добавляются модули, реализующие те или иные функциональные возможности, а не надстройки, реализующие эффекты все и сразу, вроде UI в JQ) это действительно круто
при чём тут «работало» и «не работало». Текут в IE6 и IE7 (сделайте сотню элементов, навешайте ивенты и профильните в IE6, даже на пустой странице можно), с позиционированием касяки (с оффсетом) в Opera 9.27. В багтрекер загляните.
Селекторы в jQuery быстрее. Факт. А UI-хрень все равно руками пишем.
Селекторы в jQuery быстрее. Факт. А UI-хрень все равно руками пишем.
Считаю, что написано неплохо и имеет смысл активно продолжать. Спасибо.
[off: голосовать мне хабр не дает, наверно чего то нехватает :), так что только словесная поддержка]
[off: голосовать мне хабр не дает, наверно чего то нехватает :), так что только словесная поддержка]
1) для скрытых элементов правильнее использовать свойство display
2) для возможности использования в боевых условиях надо брать не уже существующий блок, а создавать новый
3) если пишем плагин для mootools — сначала смотрим как принято оформлять исходники именно в этой библиотеке
а в целом хорошо будет, если люди узнают что есть адекватные библиотеки, а не только jquery
2) для возможности использования в боевых условиях надо брать не уже существующий блок, а создавать новый
3) если пишем плагин для mootools — сначала смотрим как принято оформлять исходники именно в этой библиотеке
а в целом хорошо будет, если люди узнают что есть адекватные библиотеки, а не только jquery
Yarc, я доработал ваш класс и исправил некоторые ошибки.
Что было сделано:
— MoodalBox теперь является синглетоном
— Позиционирование оверлея и окна теперь возложено на css. Javascript работает только для корректировки позиции окна.
— Динамическое создание оверлея и окна.
Изначально MoodalBox работал неправильно, если страница была длиной больше длины viewport'a браузера. Я спозиционировал окно и оверлей при помощи css и эта проблема исчезла.
Всё, что я добавил нового в класс, помечено моим ником.
Прошу учесть изменения)
И да, скачать новый код можно здесь: imaker.ru/repo/archive_bonch_edited.zip
Что было сделано:
— MoodalBox теперь является синглетоном
— Позиционирование оверлея и окна теперь возложено на css. Javascript работает только для корректировки позиции окна.
— Динамическое создание оверлея и окна.
Изначально MoodalBox работал неправильно, если страница была длиной больше длины viewport'a браузера. Я спозиционировал окно и оверлей при помощи css и эта проблема исчезла.
Всё, что я добавил нового в класс, помечено моим ником.
Прошу учесть изменения)
И да, скачать новый код можно здесь: imaker.ru/repo/archive_bonch_edited.zip
За CSS спасибо, буду знать, а то я всегда решал проблемы динамической высоты с помощью JavaScript. Объясните только, зачем этот класс делать синглтоном?
И еще: идея не создавать элемент, а использовать имеющийся у меня возникла, когда я смотрел на стиль написания классов в самом Mootools. Возьмите любой класс, который реализует какой-либо эффект и увидите, что в его конструктор передается идентификатор элемента, с которым мы хотим работать. Таким образом исчезает проблема внедрения контента программно (в любом случае сверстать мало-мальски сложное окошко проще, чем создавать все его элементы программно), IMHO.
И еще: идея не создавать элемент, а использовать имеющийся у меня возникла, когда я смотрел на стиль написания классов в самом Mootools. Возьмите любой класс, который реализует какой-либо эффект и увидите, что в его конструктор передается идентификатор элемента, с которым мы хотим работать. Таким образом исчезает проблема внедрения контента программно (в любом случае сверстать мало-мальски сложное окошко проще, чем создавать все его элементы программно), IMHO.
Синглетон — в данном случае для того, чтобы нельзя было несколько раз инстанцировать класс, что поможет избежать ошибок, если кто-то захочет это сделать. В принципе, от этого пожно отказаться, но с точки зрения ООП это правильный подход.
По второму вопросу. Элемент не следует создавать в тех случаях, когда вы хотите, чтобы при отключенном JS пользователь все же что-то увидел. Например, такой подход с передачей id элемента (или самого элемента) можно использовать при создании выпадающего меню, или как в случае с плагинами mootools для Accordion или Sortables.
По второму вопросу. Элемент не следует создавать в тех случаях, когда вы хотите, чтобы при отключенном JS пользователь все же что-то увидел. Например, такой подход с передачей id элемента (или самого элемента) можно использовать при создании выпадающего меню, или как в случае с плагинами mootools для Accordion или Sortables.
И еще, если требуется динамически создать сложный элемент, то я сначала верстаю его и только потом создаю на JS. Важно не забывать про порядок вложенных элементов, которые мы создаем.
Здесь нам помогут el.inject(element. 'after|before|top|...') и закладка html в firebug (чтобы посмотреть порядок динамически создаваемых тагов).
Здесь нам помогут el.inject(element. 'after|before|top|...') и закладка html в firebug (чтобы посмотреть порядок динамически создаваемых тагов).
А, еще забыл: добавил возможнось внедрять контент в окно.
Контент может быть как строкой (текстом), так и элементом (например, div'ом).
Контент может быть как строкой (текстом), так и элементом (например, div'ом).
автор, развивай класс. На данный момент он выглядит ущербно ) встраивание информации всплывающего окна в код основного окна диковато, было бы неплохо ajax задействовать. В целом молодец, ждем продолжения…
Именно на него я и выложил примеры. А в самый ответственный момент они закрыли сайт на проверку соответствия контента их правилам.
Можешь дать мне примеры в ЛС и я их на своем выложу.
Спасибо, но habracut уже выложил.
Я как раз еще не разбирался толком с яваскриптом и фреймворками для него, но меня всегда интересовали подобные эффекты.
Отличный топик, спасибо.
Отличный топик, спасибо.
Все здорово, но Jevix на хабре портит код «елочками».
this.hide.bind -> this.hide.bindWithEvent. Не?
и терминология не верная — это у вас никакой не плагин, а просто «что-то» при помощи Mootools.
Плагины подразумевают расширение функционала, которое будет доступно без дополнительных манипуляций. Ну например добавление функционала к Element.
и терминология не верная — это у вас никакой не плагин, а просто «что-то» при помощи Mootools.
Плагины подразумевают расширение функционала, которое будет доступно без дополнительных манипуляций. Ну например добавление функционала к Element.
кстати, что-то сразу не подумал. А ведь есть же уже mootools-more.js. Там есть модальные окна. Чего велосипед-то делать? =)
нет там никаких модальных окон.
ай, пардон.
не mootools-more.js, а mootools-clientside.js
clientside.cnet.com/docs/UI/StickyWin.Modal
не mootools-more.js, а mootools-clientside.js
clientside.cnet.com/docs/UI/StickyWin.Modal
Тогда почему разработчики Mootools тот же Fx.Slide отнесли в раздел плагинов?
А чем синтаксис подсвечивали?
Вроде многие тут подсвечивают на source.virtser.net/
Я тоже )) Правда немного глючная эта подсветка для HTML.
Я тоже )) Правда немного глючная эта подсветка для HTML.
вместо
я бы сделал просто
и в другом месте аналогично.
Также добавил бы link: cancel, хотя при большой скорости анимации, которая по умолчанию это не важно
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' })
Столкнулся с тем, что 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]
});
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]
});
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Пишем свой MooTools-плагин.