BG Tech Blog

Дойде дългоочаквания момент за всички 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}
});

Този скрипт ще центрира посоченият 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());

Прикачаме следните 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 е елемента, върху който ще се кликне с мишката и ще се мести целият 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
	});