html 短信插件,强大的响应式jQuery消息通知框和信息提示框插件

lobibox是一款功能非常强大的jQuery消息通知框和信息提示框插件。这个插件分为两个部分：消息通知框和信息提示框。它能非常好的结合Bootstrap使用。lobibox的消息通知框和信息提示框的特点分别是：

信息提示框

lobibox的信息提示框可以是模态窗口，也可以不是模态窗口。

允许显示多条信息。

允许使用任何可用的CSS动画(animate.css)来显示和隐藏信息提示框。

信息提示框可以显示不同的颜色和图标。

可以设置为确认信息提示框。

可以设置为一行的prompt信息框。(可以使用任何HTML5的输入框类型来作为prompt)

也可以设置为多重prompt信息框。

可以在信息提示框上使用进度条。

可以通过ajax调用来自定义信息提示框中的内容。

每一条信息都是插件的一个实例对象。你可以非常容易的获取这些实例对象，并为它们附件事件会在对象中调用方法。

消息通知框

支持不同颜色的消息通知框。

可以在窗口的任意角部为主显示消息通知框。

可以显示消息通知框将要消失的时间进度条。

可以在消息通知框上显示图片。

可以在消息通知框显示时发出提示音。

可以将消息通知框显示为不同的尺寸。

使用方法

lobibox只依赖于jQuery，Bootstrap是可选的。使用时要引入jQuery和lobibox.min.js以及lobibox.min.css文件。

创建信息提示框

// 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

});