MooTools Overlay Eklentisi ve Kullanımı

closeBu yazı 2 ay 18 gün önce yayınlanmış olduğundan güncelliğini yitirmiş veya içeriğindeki bilgilerin geçerliliği kaybolmuş olabilir. Herhangi bir yanlış anlaşılmadan bu blog sorumlu değildir.

Son birkaç gündür David Walsh‘ın blogunu takip ediyorum. Ve gerçekten kaliteli yazılar yayınlıyor. Özellikle de MooTools dersleri ile ilgili yazıları. Bu yazıda yine David Walsh’ın blogunu kaynak olarak kullandım ve “MooTools Overlay” eklentisinin kullanımını anlatacağım. Gayet basit ve iki adımda tamamlanıp kullanıma hazır olacak bir eklenti.

Öncelikle bütün bu yazıyı okumadan direkt David Walsh’ın blogundaki MooTools eklentileri sayfasına gidip Overlay eklentisinin kaynak kodlarını indirebilir ve kullanabilirsiniz. Ama ben yine de aşağıda MooTools Javascript kodlarını ekledim.

MooTools Javascript Kodu:

var Overlay = new Class({
 
	Implements: [Options,Events],
 
	options:  {
		id: 'overlay',
		color: '#000',
		duration: 500,
		opacity: 0.5,
		zIndex: 5000/*,
		onClick: $empty,
		onClose: $empty,
		onHide: $empty,
		onOpen: $empty,
		onShow: $empty
		*/
	},
 
	initialize: function(container,options) {
		this.setOptions(options);
		this.container = document.id(container);
		this.overlay = new Element('div',{
			id: this.options.id,
			opacity: 0,
			styles: {
				position: 'absolute',
				background: this.options.color,
				left: 0,
				top: 0,
				'z-index': this.options.zIndex
			},
			events: {
				click: function() {
					this.fireEvent('click');
				}.bind(this)
			}
		}).inject(this.container);
		this.tween = new Fx.Tween(this.overlay,{ 
			duration: this.options.duration,
			link: 'cancel',
			property: 'opacity',
			onStart: function() {
				var size = this.container.getScrollSize();
				this.overlay.setStyles({
					width: size.x,
					height: size.y
				});
			}.bind(this),
			onComplete: function() {
				this.fireEvent(this.overlay.get('opacity') == this.options.opacity ? 'show' : 'hide');
			}.bind(this)
		});
	},
	open: function() {
		this.fireEvent('open');
		this.tween.start(this.options.opacity);
	},
	close: function() {
		this.fireEvent('close');
		this.tween.start(0);
	}
});

Kullanımı:

var overlay = new Overlay(document.body,{
	id: 'overlay',
	color: '#000',
	duration: 300,
	opacity: 0.4,
	onClick: function() {
		this.close();
	},
	onShow: function() {
		//make ajax call while the overlay is happening...?
		//var Request = new Request()....
	}
});

NOT: Kullanım kodundaki “id” kısmının aktif olduğuna emin olun. Zira bu efekti sayfanın birkaç yerinde birden kullanacaksanız önemli bir ayrıntı. Ayrıca yine David Walsh’ın blogundan demo sayfasına ulaşabilirsiniz.

Kaynak: David Walsh

Yazıyı Paylaşın:  

Siz de yorum yapın: