messageBox system is a simple alert box ot message box displaying into a usable site or application in HTML.
In the header of the page set style sheets
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.messagebox.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>The stylesheet used by the plugin is loaded directly by itself.
See the test.html for more examples
// This function is called by the plug when the latter is closed
function msgClose(ret){
console.log("msgClose -> button value %s", ret);
}
$( document ).ready(function() {
//Instanciation du plugin
var msg = $("body").messageBox({
cbClose : msgClose,
modal:true
});
//show the alertBox
msg.data('messageBox').warning('MessageBox Warning', 'jquery.messageBox is good for you !');
//show an alertbox with custom buttons
msg.data('messageBox').exclamation('MessageBox Warning', 'jquery.messageBox is good for you !', [{text:'Yeahhh',return:128}]);
//show an messageBox with a question and multipple responses
msg.data('messageBox').question('Format C:', 'Are you sure you want to format the C: drive ?', [{text:'Of course',return:128}, {text:'Heuhhh ???',return:127},{text:'Nein danke',return:126}]);
});These options are passed to the plugin beings during initialization
autoClose : 10
/**
Global option.
Default = 0
When this value is greater than zero , the message window will be closed automatically after the set time
*/showAutoClose : true
/**
Global option.
Default = true
When this value is set to true the countdown is displayed
*/modal : true
/**
Global option.
Default = true
When this value is set to true the messageBox is displayed on a darker transparent background
*/css : 'css/messageBox.css'
/**
Global option.
Default = 'css/messageBox.css'
Filename and path of the CSS file loaded by the plugin
*/cbClose : false
/**
Global option.
Default = false
Callback function called by the plugin when the messageBox is closed
This function will receive the value of the clicked button
Ex :
function msgClose(ret){
console.log("msgClose -> retour %s", ret);
}
*/cbReady : false
/**
Global option.
Default = false
Callback function called by the plugin when it's ready
Ex :
function msgBoxReady(){
console.log("By djingo ! msgBox is ready. incredible isn't.");
}
*/locale : {}
/**
Global option.
Default = {
NO : 'Non',
YES : 'Oui',
CANCEL : 'Annuler',
OK : 'Ok',
textAutoClose: 'Fermeture automatique dans %d sec'
}
Ex in english :
local = {
NO : 'No',
YES : 'Yes',
CANCEL : 'Cancel',
OK : 'Ok',
textAutoClose: 'Automatic closing in %d sec'
}
Ex in spanish :
local = {
NO : 'No',
YES : 'Si',
CANCEL : 'Cancelar',
OK : 'Ok',
textAutoClose: 'Cierre automático en %d seg'
}
*/- plugin.data('messageBox').danger(title, text, [autoclose], [modal]);
- plugin.data('messageBox').warning(title, text, [autoclose], [modal]);
- plugin.data('messageBox').info(title, text, [autoclose], [modal]);
- plugin.data('messageBox').default(title, text, [autoclose], [modal]);
- plugin.data('messageBox').question(title, text, buttons, [autoclose], [modal]);
- plugin.data('messageBox').exclamation(title, text, buttons, [autoclose], [modal]);
title: (required) (string) is a string contains the messageBox titletest: (required) (string) is a string contains the messageBox textautoclose: (not required) (int) is a integer contains the delay to autoclose the messageBoxmodal: (not required) (bool) is a boolean to display the messageBox in modal mode or notbuttons: (required) (array of object) contains the buttons to display in the messageBox The button must have this form : {text: 'button text', return: 128} The return value will be passed to the callback functioncbClose ()