jquery.messageBox
messageBox system is a simple alert box ot message box displaying into a usable site or application in HTML.
Installation
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.
Usage
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}]); });Options
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' } */Functions
- 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]);
Params
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 ()
