lobibox是一款功能非常强大的jQuery消息通知框和信息提示框插件。这个插件分为两个部分:消息通知框和信息提示框。它能非常好的结合Bootstrap使用。lobibox的消息通知框和信息提示框的特点分别是:
信息提示框
- lobibox的信息提示框可以是模态窗口,也可以不是模态窗口。
- 允许显示多条信息。
- 允许使用任何可用的CSS动画(animate.css)来显示和隐藏信息提示框。
- 信息提示框可以显示不同的颜色和图标。
- 可以设置为确认信息提示框。
- 可以设置为一行的prompt信息框。(可以使用任何HTML5的输入框类型来作为prompt)
- 也可以设置为多重prompt信息框。
- 可以在信息提示框上使用进度条。
- 可以通过ajax调用来自定义信息提示框中的内容。
- 每一条信息都是插件的一个实例对象。你可以非常容易的获取这些实例对象,并为它们附件事件会在对象中调用方法。
消息通知框
- 支持不同颜色的消息通知框。
- 可以在窗口的任意角部为主显示消息通知框。
- 可以显示消息通知框将要消失的时间进度条。
- 可以在消息通知框上显示图片。
- 可以在消息通知框显示时发出提示音。
- 可以将消息通知框显示为不同的尺寸。
使用方法
lobibox只依赖于jQuery,Bootstrap是可选的。使用时要引入jQuery和lobibox.min.js以及lobibox.min.css文件。
<script src="js/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="dist/css/LobiBox.min.css"> <script src="dist/js/lobibox.min.js"></script>
创建信息提示框
// Confirm Lobibox.confirm({ ... //Options }); // Alert Lobibox.alert( 'error|success|warning|info', // Any of the following { ... //Options } ); // Prompt Lobibox.prompt( '', // Any HTML5 input type is valid { //Options } ); // Progress Lobibox.progress({ //Options }); // Window Lobibox.window({ //Options });
信息提示框的默认参数
// If the messagebox is larger (in width) than window's width. // The messagebox's width is reduced to window width - 2 * horizontalOffset horizontalOffset: 5, width : 600, // Height is automatically given calculated by width height : 'auto', // Show close button or not closeButton : true, // Make messagebox draggable draggable : false, // Class for custom buttons customBtnClass : 'lobibox-btn-default', modal : true, debug : false, // Position where buttons should be aligned buttonsAlign : 'center', // Close messagebox on Esc press closeOnEsc : true, //Overriding default options Lobibox.base.DEFAULTS = $.extend({}, Lobibox.base.DEFAULTS, { //override any options from default options });
信息提示框的可用参数
Lobibox.base.OPTIONS = { // DO NOT change this value. // Some functionality is depended on it bodyClass : 'lobibox-open', // DO NOT change this object. // Some functionality is depended on it modalClasses : { 'error' : 'lobibox-error', 'success' : 'lobibox-success', 'info' : 'lobibox-info', 'warning' : 'lobibox-warning', 'confirm' : 'lobibox-confirm', 'progress' : 'lobibox-progress', 'prompt' : 'lobibox-prompt', 'default' : 'lobibox-default', 'window' : 'lobibox-window' }, // This is option how buttons can be shown. // What are buttonsAlign option available values buttonsAlign: ['left', 'center', 'right'], // You can change the title or class of buttons from here or use the same structure object for button when creating messagebox // closeOnClick : true will close the messagebox when clicking this type of button. // Set it to false not to close messagebox when clicking on it buttons: { ok: { 'class': 'lobibox-btn lobibox-btn-default', text: 'OK', closeOnClick: true }, cancel: { 'class': 'lobibox-btn lobibox-btn-cancel', text: 'Cancel', closeOnClick: true }, yes: { 'class': 'lobibox-btn lobibox-btn-yes', text: 'Yes', closeOnClick: true }, no: { 'class': 'lobibox-btn lobibox-btn-no', text: 'No', closeOnClick: true } } }; //Overriding default options Lobibox.base.OPTIONS = $.extend({}, Lobibox.base.OPTIONS, { ... //override any options except those above which is written "DO NOT change" });
创建消息通知框
Lobibox.notify( // 'warning', 'info', 'success', 'error' 'warning', { ... } );
消息通知框的默认参数
// Title of notification. // Do not include it for default title or set custom string. // Set this false to disable title title: true, // normal, mini, large size: 'normal', // Show animation class. (Uses animate.css) showClass: 'flipInX', // Hide animation class (Uses animate.css) hideClass: 'zoomOutDown', // Icon of notification. // Leave as is for default icon or set custom string icon: true, // Message of notification msg: '', // Image source string img: null, // Make notifications closable closable: true, // Hide notification after this time (in miliseconds) delay: 5000, // Show timer indicator delayIndicator: true, // Close notifications by clicking on them closeOnClick: true, // Width of notification box width: 400, // Sound of notification. Set this false to disable sound. // Leave as is for default sound or set custom soud path sound: true, // Place to show notification. // Available options: "top left", "top right", "bottom left", "bottom right" position: "bottom right" // Overriding default options Lobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, { ... //override any options from default options });
消息通知框的可用参数
Lobibox.notify.OPTIONS = { 'class': 'animated-fast', soundPath: 'src/sounds/', // 通过该参数修改消息通知框的尺寸 large: { width: 500 }, // 设置为最小尺寸的消息通知框 mini: { 'class': 'notify-mini' }, // Default options of different style notifications success: { 'class': 'lobibox-notify-success', 'title': 'Success', 'icon': 'glyphicon glyphicon-ok-sign', sound: 'sound2.mp3' }, error: { 'class': 'lobibox-notify-error', 'title': 'Error', 'icon': 'glyphicon glyphicon-remove-sign', sound: 'sound4.mp3' }, warning: { 'class': 'lobibox-notify-warning', 'title': 'Warning', 'icon': 'glyphicon glyphicon-exclamation-sign', sound: 'sound5.mp3' }, info: { 'class': 'lobibox-notify-info', 'title': 'Information', 'icon': 'glyphicon glyphicon-info-sign', sound: 'sound6.mp3' } }; //Overriding default options Lobibox.notify.OPTIONS = $.extend({}, Lobibox.notify.OPTIONS, { ... //override any options from default options });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!