JQUERY源码 作者： - 2016年8月23日
1个投票
1条评论

提示对话框-经典多功能响应式jQuery消息提示框对话框插件

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
});               

在线预览 网盘下载

郑重声明：

				
1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

				
2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

				
3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

				
4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。
作者： 蓝文
查看更多
标签:, , , ,
关注公众号“蓝文资源库”获取更多好资源
提示对话框-经典多功能响应式jQuery消息提示框对话框插件 5 out of 5 based on 1 ratings. 1 user reviews.

相关文章

WORDPRESS主题模板 2022年8月2日

Soledad响应式创意时尚多主题多用途WP主题模板下载

超过6886个用于多种用途的首…

阅读更多
WORDPRESS主题模板 2022年8月2日

Stockholm经典多用途响应式主题WORDPRESS模板下载

Stockholm是一个华丽的…

阅读更多
WORDPRESS主题模板 2022年8月2日 3

The7最新版经典响应式多用途主题WP模板下载

The7与视觉作曲家和终极插件…

阅读更多

1条评论

发表评论

发表评论