This time I will share jQuery Plugin and tutorial about Responsive jQuery Message Box & Notification Plugin – lobibox, hope it will help you in programming stack.
| File Size: | 1.21 MB |
|---|---|
| Views Total: | 35745 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Lobibox is responsive jQuery dialog box & notification plugin that is divided into two parts: Messageboxes and Notifications. Works well with Bootstrap.
Messageboxes:
- Lobibox messages boxes can be modal and not modal as well.
- You can show multiple messages at the same time.
- Every message can be draggable (On small screens dragging is disabled)
- You can show: messages in different colors and icons; confirm message; one line prompt; multiline prompt; Any HTML5 input type can be used in prompt window. Such as: text, color, date, datetime, email, number range; Progress messagebox. Lobibox comes with default progress style but you can use bootstrap style progress bar; custom content window with ajax support with custom action buttons
- Every message is an instance of “class”. You can easily grab the instance and attach events or call methods directly by the instance.
Notification:
- Different color support
- Possibility to show in any corners of the screen
- Delay after which it disappears
- Show delay indicator
- Show with image
- Sound support
- Size support. You can show notifications of different size
Basic usage:
1. Download and include the jQuery lobibox plugin after jQuery library.
1 |
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> |
2 |
<link rel="stylesheet" href="dist/css/LobiBox.min.css"> |
3 |
<script src="dist/js/lobibox.min.js"></script> |
2. Create messageboxes:
01 |
// Confirm |
02 |
Lobibox.confirm({ |
03 |
... //Options |
04 |
}); |
05 |
06 |
// Alert |
07 |
Lobibox.alert( |
08 |
'error|success|warning|info', // Any of the following |
09 |
{ |
10 |
... //Options |
11 |
} |
12 |
); |
13 |
14 |
// Prompt |
15 |
Lobibox.prompt( |
16 |
'', // Any HTML5 input type is valid |
17 |
{ |
18 |
//Options |
19 |
} |
20 |
); |
21 |
22 |
// Progress |
23 |
Lobibox.progress({ |
24 |
//Options |
25 |
}); |
26 |
27 |
// Window |
28 |
Lobibox.window({ |
29 |
//Options |
30 |
}); |
3. Default options for all messageboxes.
01 |
// If the messagebox is larger (in width) than window's width. |
02 |
// The messagebox's width is reduced to window width - 2 * horizontalOffset |
03 |
horizontalOffset: 5, |
04 |
05 |
width : 600, |
06 |
07 |
// Height is automatically given calculated by width |
08 |
height : 'auto', |
09 |
10 |
// Show close button or not |
11 |
closeButton : true, |
12 |
13 |
// Make messagebox draggable |
14 |
draggable : false, |
15 |
16 |
// Class for custom buttons |
17 |
customBtnClass : 'lobibox-btn-default', |
18 |
19 |
modal : true, |
20 |
debug : false, |
21 |
22 |
// Position where buttons should be aligned |
23 |
buttonsAlign : 'center', |
24 |
25 |
// Close messagebox on Esc press |
26 |
closeOnEsc : true, |
27 |
28 |
//Overriding default options |
29 |
Lobibox.base.DEFAULTS = $.extend({}, Lobibox.base.DEFAULTS, { |
30 |
//override any options from default options |
31 |
}); |
4. Available options for all messageboxes.
01 |
Lobibox.base.OPTIONS = { |
02 |
03 |
// DO NOT change this value. |
04 |
// Some functionality is depended on it |
05 |
bodyClass : 'lobibox-open', |
06 |
07 |
// DO NOT change this object. |
08 |
// Some functionality is depended on it |
09 |
modalClasses : { |
10 |
'error' : 'lobibox-error', |
11 |
'success' : 'lobibox-success', |
12 |
'info' : 'lobibox-info', |
13 |
'warning' : 'lobibox-warning', |
14 |
'confirm' : 'lobibox-confirm', |
15 |
'progress' : 'lobibox-progress', |
16 |
'prompt' : 'lobibox-prompt', |
17 |
'default' : 'lobibox-default', |
18 |
'window' : 'lobibox-window' |
19 |
}, |
20 |
21 |
// This is option how buttons can be shown. |
22 |
// What are buttonsAlign option available values |
23 |
buttonsAlign: ['left', 'center', 'right'], |
24 |
25 |
// You can change the title or class of buttons from here or use the same structure object for button when creating messagebox |
26 |
// closeOnClick : true will close the messagebox when clicking this type of button. |
27 |
// Set it to false not to close messagebox when clicking on it |
28 |
buttons: { |
29 |
ok: { |
30 |
'class': 'lobibox-btn lobibox-btn-default', |
31 |
text: 'OK', |
32 |
closeOnClick: true |
33 |
}, |
34 |
cancel: { |
35 |
'class': 'lobibox-btn lobibox-btn-cancel', |
36 |
text: 'Cancel', |
37 |
closeOnClick: true |
38 |
}, |
39 |
yes: { |
40 |
'class': 'lobibox-btn lobibox-btn-yes', |
41 |
text: 'Yes', |
42 |
closeOnClick: true |
43 |
}, |
44 |
no: { |
45 |
'class': 'lobibox-btn lobibox-btn-no', |
46 |
text: 'No', |
47 |
closeOnClick: true |
48 |
} |
49 |
} |
50 |
}; |
51 |
52 |
53 |
//Overriding de
|
