Дойде дългоочаквания момент за всички MooTools фенове като мен. Официалния старт на MooTools Forge. Това е мястото, където всеки може да публикува своя plugin и да го направи публично достояните. Това е мястото, където всеки може да намери подходящ plugin за своя проект.
Личното ми мнение е, че именно тази стъпка (пускането на forge-а), предприета от MooTools Core developers ще изстреля framework-а на още по-добра позиция сред останалите JavaScript Frameworks.
Всички сте чували за Ferrari. А знаете ли, че сайта е написан на MooTools? 🙂
Dimitar Christoff от fragged.org си е поиграл малко с MooTools и Parallax и е направил нещо доста интересно 🙂 Хвърлете едно око на lemming анимацията, която е сътворил 🙂 Заслужава си четенето на кода 😉
От известно време с колегите водим дебат на тема JavaScript Frameworks. Те работят изцяло с JQuery, а аз съм фен на MooTools. Спора е почти неразрешим. Каним се да напишем статия за предимствата и недостатъците на двата framework-а, но междувременно ми е интересно вашето мнение.
Гласувайте в анкетата и изкажете мнението си в коментарите към поста 🙂
Отново с MooTools и отново елементарно
1
2
3
4
5
6
7
| var doMove = new Fx.Move($("element"));
doMove.start({
relativeTo: document.body,
position: 'center',
edge: false,
offset: {x:0,y:0}
}); |
var doMove = new Fx.Move($("element"));
doMove.start({
relativeTo: document.body,
position: 'center',
edge: false,
offset: {x:0,y:0}
});
Този скрипт ще центрира посоченият element в центъра на сайта, защото event-a е прикачен към document.body
За да усложним малко “упражнението” може да си направим функция с посоченият по-горе скрипт, която да изпълняваме винаги, когато се премести скрола на сайта или пък се сменят размерите на браузъра.
1
2
3
4
5
6
7
8
9
10
11
12
| function moveToCenter() {
var doMove = new Fx.Move($("element"));
doMove.start({
relativeTo: document.body,
position: "center",
edge: false,
offset: {x:0,y:0}
});
}
window.addEvent("resize", moveToCenter());
window.addEvent("scroll", moveToCenter()); |
function moveToCenter() {
var doMove = new Fx.Move($("element"));
doMove.start({
relativeTo: document.body,
position: "center",
edge: false,
offset: {x:0,y:0}
});
}
window.addEvent("resize", moveToCenter());
window.addEvent("scroll", moveToCenter());
Прикачаме следните event-и:
– Първият event е за resize на браузър прозореца
– Вторият за scroll-a на страницата.
С MooTools е изключително елементарно да се постигне споменатият ефект на Drag на избран елемент от DOM дървото.
1
2
3
4
5
6
7
8
| $("clickElement").addEvent("mousedown", function(){
var myDrag = $("moveElement").makeDraggable({
onComplete: function(){
myDrag.detach();
}
});
myDrag.attach();
}); |
$("clickElement").addEvent("mousedown", function(){
var myDrag = $("moveElement").makeDraggable({
onComplete: function(){
myDrag.detach();
}
});
myDrag.attach();
});
Където clickElement е елемента, върху който ще се кликне с мишката и ще се мести целият moveElement.
Днес ми трябваше скрипт, който да визуализира алерти, но не от онези грозните JavaScript alert();, а нещо по-интересно, което мога да контролирам. След кратък research по въпроса, намерих доста интересен и flexible “инструмент” 🙂 Казва се NotiMoo.
Самия срипт можете да свалите от google projects, а ето и как се използва:
1
2
3
4
5
6
7
8
9
10
11
| var notimooManager = new Notimoo({
locationVType: 'top',
locationHType: 'left'
});
notimooManager.show({
title: 'Заглавие',
message: 'Текст',
width: 200,
visibleTime: 2000
}); |
var notimooManager = new Notimoo({
locationVType: 'top',
locationHType: 'left'
});
notimooManager.show({
title: 'Заглавие',
message: 'Текст',
width: 200,
visibleTime: 2000
});