Recommend this page to a friend! |
Download |
Info | Example | Files | Download | Reputation | Support forum | Blog | Links |
Ratings | Unique User Downloads | Download Rankings | ||||
Not enough user ratings | Total: 178 | All time: 292 This week: 4 |
Version | License | JavaScript version | Categories | |||
thrak-msgbox 1.2.6 | BSD License | 1.0 | HTML, jQuery |
Description | Author | |
This object can show alert messages of many types in page elements. |
|
The msgbox jQuery component provides stylable alternatives to the native javascript functions alert(), confirm() and input().
The jQuery object will provide you with the following functions :
Additionnally, you can use the $.wait() function to display a wait message while performing some processing.
There is also a (redundant) $.msgbox() function, which mimics the Windows API function MessageBox.
You first need to include jQuery and jQuery UI :
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script language='javascript' src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
Then include a theme for styling elements specific to message boxes ; I provide a customized theme, thrak, based on the redmond theme, with additions for message boxes :
<link rel="stylesheet" href="css/themes/thrak/jquery-ui-1.10.3.custom.css">
Finally, include the source file :
<script language="javascript" type="text/javascript" src="thrak.ui.msgbox-1.2.1.js"></script>
Calling the native message box functions of your browser is straightforward : call the function and you will be sure that the next instruction after the call will only be executed when the call has completed, ie when the user has closed the message box :
alert ( 'this is some informational message' ) ;
doSomethingAfterAlert ( ) ;
Doing the same using jQuery UI will require you to use callback, in order to take into account the "pure multitasking, asynchronous essential nature" of Javascript. So, using the $.alert() function, you will have to rewrite the above code the way below (note that I use my own indentation style for that, you are free to refuse it !) :
$. alert
(
'this is some informational message',
function ( )
{
doSomethingAfterAlert ( ) ;
}
) ;
Msgbox functions usually take at least 3 arguments :
You can specify arguments in the order you like, because they are recognized using their types. The only rule to follow is that the message string must appear before the title string (if specified).
The alert(), error(), confirm(), inputbox() and msgbox() functions all accept a callback, which have the following signature :
callback ( status, dialog )
Where status depends on the user action : it is usually a boolean set to true if the user clicked the Ok button and false if the user clicked the Cancel button or the Close icon ; dialog is a reference to the opened dialog object.
All msgbox functions accept an options object, which are simply options passed to the jQuery dialog() function.
Once closed, the displayed message boxes are removed from the DOM.
Displays an alert message (simple message box). The parameters are the following :
The status parameter of the callback function is always set to true.
The options parameter can now contain a buttons member, which allows you to specify additional buttons to your alert box ; each element will be added to the left of the Ok button and can contain the following members :
Displays an error message (simple message box). The parameters are the following :
The difference with $.alert() resides only in the class names used for styling. The status parameter of the callback function is always set to true.
As for $.alert, additional buttons may be specified with the options parameter.
Asks the user for text input. The parameters are the following :
field_definition : Html input field definition. The default is :
<input type="text" size="50"/>
Note that you do not need to define an id or name attribute. This parameter is optional.
The status parameter of the callback function is set to the input string if the user clicked Ok, or false if the user clicked on the Cancel button or Close icon.
This function is used to display a modal dialog with no buttons and no possibility to be closed. You can use it to display a message while doing some long processing.
It can be displayed using one of the following forms :
$.wait ( message )
$.wait ( options )
message is the message to be displayed. options is an object than can contain any $.dialog() options, plus the following specific members :
To close the wait dialog box, simply call $.wait() with no parameters.
The $.msgbox() functions mimics the Windows API MessageBox function. It accepts an additional flags parameter, which is a combination of the following bit constants :
The default button, in the button set defined by the above constants, can be set to one of the following values :
The following flags allow to specify an additional icon to be displayed :
The status parameter of the callback function will be set to one of the following constants, representing the button the user clicked :
The following specific classes are added to dialog box items :
Each of these classes have also a counterpart depending on the function you are calling. For example, the $.alert() function will add a 'ui-alert-dialog-button' class for items that have class 'ui-popup-dialog-button'. $.error() will add ui-error-dialog-button-class, and so on for all the '\-popup\-' classes defined.
Files (23) |
File | Role | Description | ||
---|---|---|---|---|
css (1 directory) | ||||
index.html | Example | Example script | ||
LICENSE | Lic. | License file | ||
NOTICE | Data | Disclaimer | ||
README.md | Doc. | Documentation | ||
thrak.ui.msgbox-1.2.2.js | Class | Class source |
Files (23) | / | css | / | themes | / | thrak |
File | Role | Description | ||
---|---|---|---|---|
images (17 files) | ||||
jquery-ui-1.10.3.custom.css | Data | Custom theme |
Files (23) | / | css | / | themes | / | thrak | / | images |
File | Role | Description |
---|---|---|
animated-overlay.gif | Data | Theme image |
calc-icon.png | Data | Theme image |
calendar-icon.png | Data | Theme image |
icon-close.png | Data | Theme image |
MB_ICONASTERISK.png | Data | Theme image |
MB_ICONERROR.png | Data | Theme image |
MB_ICONEXCLAMATION.png | Data | Theme image |
MB_ICONHAND.png | Data | Theme image |
MB_ICONINFORMATION.png | Data | Theme image |
MB_ICONQUESTION.png | Data | Theme image |
MB_ICONSTOP.png | Data | Theme image |
MB_ICONWARNING.png | Data | Theme image |
ui-icons_000000_256x240.png | Data | Icon library |
ui-icons_791B36_256x240.png | Data | Icon ibrary |
ui-icons_9f9f9f_256x240.png | Data | Icon library |
wait32x32.gif | Data | Theme image |
wait64x64.gif | Data | Theme image |
Version Control | Unique User Downloads | Download Rankings | |||||||||||||||
0% |
|
|
Applications that use this package |
If you know an application of this package, send a message to the author to add a link here.