yali4/MessageBox

Changelog (Değişiklikler)

View bugs have been fixed. (Görünüm sorunları giderildi.)
Brought into line with all browsers. (Tüm tarayıcılar için uyumlu hale getirildi.)
The use of context has become active again. (Bağlam kullanımı yeniden aktifleştirildi.)
Work has been made more than one message box. (Birden fazla mesaj kutusu açılabilir oldu.)

Supported Browsers (Desteklenen Tarayıcılar)

Chrome, Safari, Firefox, Opera
Internet Explorer 7,8,9,10,11

How to Use? (Nasıl Kullanılır?)

$(jQuerySelector).MessageBox(event,[options],callback(response){

	// supported in the context (bağlam desteklenir)

},preventDefault,stopPropagation);

// or (ya da)

$.MessageBox([options],callback(response){

	// not supported in the context (bağlam desteklenmez)

});

Default Settings (Varsayılan Ayarlar)

// Context is Supported (Bağlam Desteklendiğinde)
preventDefault = false

// Context is Supported (Bağlam Desteklendiğinde)
stopPropagation = false

// Modal Close Option (Arkaplan Tıklanınca Kapanma)
modalclose = false

// Usekey Option (Tuş Kullanım Ayarı)
usekey = false

Methods (Metotlar)

// Create New MessageBox (Yeni bir MessageBox oluşturalım)
MessageBox = $.MessageBox({title:'Title',content:'Content'},function(response){
	// not supported in the context (bağlam desteklenmiyor)
});

// Change Title Function (Başlığı Değiştirme Fonksiyonu)
MessageBox.title(title);

// Change Content Function (İçeriği Değiştirme Fonksiyonu)
MessageBox.content(content);

// Hide Function (Gizleme Fonksiyonu)
MessageBox.hide();

// Show Function (Gösterme Fonksiyonu)
MessageBox.show();

// Close Function (Kapatma Fonksiyonu)
MessageBox.close();

Options (Ayarlar)

title
String

content
String HTML

type
confirmation information

animate
animate: { open: 'effect', close: 'effect', speed: '500' }

buttons
buttons: { confirm: {title : 'Continue', style : 'continue'}, cancel: {title:'Cancel', style : 'cancel'} }

background
CSS Background Code

opacity
CSS Opacity Code

timeout
timeout: { second : '10', screen: true }

modalclose
true false

usekey
true false

Effects (Efektler)

open
topFade bottomFade

close
fadeOut

global
top left right bottom topLeft topRight bottomLeft bottomRight

Examples (Örnekler)

Click to go to the overview page (Tanıtım sayfası için tıklayın)

$('#button1').MessageBox('click',{
	title: 'Confirmation',
	content: 'Are you sure?',
	type: 'confirmation', usekey: true,
	animate: { open: 'topFade', close: 'bottom', speed: '500' },
	buttons: { confirm: {title : 'CONTINUE', style : 'continue'}, cancel: {title:'CANCEL', style : 'cancel'} }
},function(response){ });

$('#button2').MessageBox('click',{
	title: 'License',
	content: 'I have read and understood.',
	type: 'information', usekey: true,
	animate: { open: 'topRight', close: 'bottomLeft', speed: '500' },
	buttons: { confirm: {title : 'OK', style : 'continue'} }
},function(response){ });

$('#button3').MessageBox('click',{
	title: 'Information',
	content: 'Information Message',
	type: 'information', usekey: true,
	animate: { open : 'bottomLeft', close : 'topRight', speed: '500' },
	buttons: { confirm: {title : 'OK', style : 'continue'} }
},function(response){ });

$('#button4').MessageBox('click',{
	title: 'Alert',
	content: 'You do not have sufficient authority!',
	type: 'information', usekey: true,
	animate: { open : 'left', close : 'right', speed: '500' },
	buttons: { confirm: {title : 'OK', style : 'danger'} }
},function(response){ });

$('#button5').MessageBox('click',{
	title: 'Tutorial Effect',
	content: 'Coming soon...',
	type: 'information', usekey: true,
	animate: { open : 'bottomFade', close : 'fadeOut', speed: '500' },
	buttons: { confirm: {title : 'CLOSE', style : 'danger'} }
},function(response){ });

$.MessageBox({
	title: 'Welcome',
	content: 'jQuery MessageBox Plugin',
	type: 'confirmation', background: '#ffcc1a',
	animate: { open : 'top', close : 'bottom', speed : '500' },
	buttons: { confirm: {title: 'NEXT', style: 'continue'}, cancel: {title: 'CANCEL', style: 'cancel' } },
	usekey: true
},function(response) {
	if (response) {
		$.MessageBox({
			title: 'Information',
			content: 'Please read the descriptions.',
			type: 'information', background: '#157FB0',
			animate: { open : 'bottom', close : 'top', speed : '500' },
			buttons: { confirm: {title : 'OK', style : 'continue'} },
			timeout: { second : '10', screen: true },
			usekey:true
		});
	}
});

yali4 / MessageBox