响应式jQuery消息通知框和信息提示框插件

PetitQ 对话框/Tips 2018-10-26 2.05K 0 1

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

```
});
```

响应式 jQuery 消息通知框和信息提示框插件

已有 512 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

响应式jQuery消息通知框和信息提示框插件

信息提示框:

消息通知框:

使用方法:

创建信息提示框:

信息提示框的默认参数:

信息提示框的可用参数:

创建消息通知框:

消息通知框的可用参数:

响应式 jQuery 消息通知框和信息提示框插件

相关文章

动画过渡效果jQuery窗口插件

jQuery+css3简单实用确认对话框

带炫酷CSS3过渡动画jQuery模态窗口插件

发表回复取消回复

热销模板

对话框/Tips

信息提示框:

消息通知框:

使用方法:

创建信息提示框:

信息提示框的默认参数:

信息提示框的可用参数:

创建消息通知框:

消息通知框的可用参数:

响应式 jQuery 消息通知框和信息提示框插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复