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
});
}
});