jQuery消息框插件lobibox

所属分类:UI-弹出层,对话框,工具提示

分享到微信朋友圈
X
jQuery消息框插件lobibox ie兼容9

更新时间:2021-03-14 22:38:50

Lobibox分为两部分

  1. 消息框

  2. 通知

特点

Lobibox分为两部分

留言框

  • Lobibox消息框可以是模式的,也可以不是模式的

  • 您可以同时显示多条消息

  • 使用任何可用的动画类显示和隐藏消息框

  • 每条消息都是可拖动的(在小屏幕上,禁止拖动)

  • 你可以展示

    1. 不同颜色和图标的消息框

    2. 确认讯息

    3. 一行提示(提示窗口中可以使用任何HTML5输入类型。例如:文本,颜色,日期,日期时间,电子邮件,数字,范围等)

    4. 多行提示

    5. 进度消息框。 Lobibox带有默认进度样式,但是您可以使用引导程序或任何其他样式进度栏。

    6. 带有ajax支持和自定义操作按钮的自定义内容窗口

  • 每个消息都是插件的一个实例。 您可以轻松地获取实例并将事件或调用方法直接附加到实例上。

通知事项

  • 不同的颜色支持

  • 可以在屏幕的任何位置显示

  • 延迟

  • 显示延迟指示器

  • 显示图片

  • 声音支持

  • 尺寸支持。 您可以显示不同大小的通知

安装和依赖

Lobibox仅依赖jQuery。

1,包括必要的css/js文件

<!DOCTYPE html>
<html>
<head>
  <!--Include this css file in the <head> tag -->
  <link rel="stylesheet" href="dist/css/Lobibox.min.css"/>
</head>

<body>
  ...
  <!--Include these script files in the <head> or <body> tag-->
  <script src="lib/jquery.1.11.min.js"></script>
  <script src="dist/js/Lobibox.min.js"></script>
  <!-- If you do not need both (messageboxes and notifications) you can inclue only one of them -->
  <!-- <script src="dist/js/messageboxes.min.js"></script> -->
  <!-- <script src="dist/js/notifications.min.js"></script> -->
</body>
</html>

2,调用插件方法以显示消息框或通知

留言框

确认

Lobibox.confirm({... //Options});

警报

Lobibox.alert(
'error|success|warning|info', // Any of the following
{
    ... //Options
}
);

迅速的

Lobibox.prompt(
'', // Any HTML5 input type is valid
{
    ... //Options
});

进步

Lobibox.progress({
... //Options
});

窗户

Lobibox.window({
... //Options
});

选项

所有消息框的默认选项

horizontalOffset: 5,                //If the messagebox is larger (in width) than window's width. The messagebox's width is reduced to window width - 2 * horizontalOffset
verticalOffset: 5,                  //If the messagebox is larger (in height) than window's height. The messagebox's height is reduced to window height - 2 * verticalOffset
width: 600,
height: 'auto',                     // Height is automatically calculated by width
closeButton: true,                  // Show close button or not
draggable: false,                   // Make messagebox draggable
customBtnClass: 'lobibox-btn lobibox-btn-default', // Class for custom buttons
modal: true,
debug: false,
buttonsAlign: 'center',             // Position where buttons should be aligned
closeOnEsc: true,                   // Close messagebox on Esc press
delayToRemove: 200,                 // Time after which lobibox will be removed after remove call. (This option is for hide animation to finish)
delay: false,                       // Time to remove lobibox after shown
baseClass: 'animated-super-fast',   // Base class to add all messageboxes
showClass: 'zoomIn',                // Show animation class
hideClass: 'zoomOut',               // Hide animation class
iconSource: 'bootstrap',            // "bootstrap" or "fontAwesome" the library which will be used for icons

//Overriding default options
Lobibox.base.DEFAULTS = $.extend({}, Lobibox.base.DEFAULTS, {
... //override any options from default options
});

所有消息框的可用选项

Lobibox.base.OPTIONS = {//DO NOT change this value. Lobibox depended on itbodyClass       : 'lobibox-open',//DO NOT change this object. Lobibox is depended on itmodalClasses : {
    '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 valuesbuttonsAlign: ['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 itbuttons: {
    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
    }},icons: {
    bootstrap: {
        confirm: 'glyphicon glyphicon-question-sign',
        success: 'glyphicon glyphicon-ok-sign',
        error: 'glyphicon glyphicon-remove-sign',
        warning: 'glyphicon glyphicon-exclamation-sign',
        info: 'glyphicon glyphicon-info-sign'
    },
    fontAwesome: {
        confirm: 'fa fa-question-circle',
        success: 'fa fa-check-circle',
        error: 'fa fa-times-circle',
        warning: 'fa fa-exclamation-circle',
        info: 'fa fa-info-circle'
    }}};//Overriding default optionsLobibox.base.OPTIONS = $.extend({}, Lobibox.base.OPTIONS, {... //override any options except those above which is written "DO NOT change"});

确认的默认选项

title           : 'Question',
width           : 500,

//Overriding default options
Lobibox.confirm.DEFAULTS = $.extend({}, Lobibox.confirm.DEFAULTS, {
... //override any options from default options
});

提示的默认选项

width: 400,
attrs : {},         // Plain object of any valid attribute of input field
value: '',          // Value which is given to textfield when messagebox is created
multiline: false,   // Set this true for multiline prompt
lines: 3,           // This works only for multiline prompt. Number of lines
type: 'text',       // Prompt type. Available types (text|number|color)
label: ''           // Set some text which will be shown exactly on top of textfield
required: true,
errorMessage: 'The field is required'

//Overriding default options
Lobibox.prompt.DEFAULTS = $.extend({}, Lobibox.prompt.DEFAULTS, {
... //override any options from default options
});
相关插件-弹出层,对话框,工具提示

一款简单实用的弹窗插件JMask(原创)

JMask是一款遮罩插件,其小巧灵活,在项目开发中方便实用。使用方式也特别简单,只需要引入一个js文件,该插件基于JQuery开发,所以使用之前需要引入JQuery文件。
  弹出层
 33930  330

响应式模态框

简洁、弹出效果好的响应式模态框,适用移动端
  弹出层
 31629  383

超简单实用的弹窗jquery插件

兼容到ie8,简洁,实用,美观,可以自由更改弹窗样式。可以在弹窗中加上ajax请求的数据!
  弹出层
 90851  411

jQuery制作侧边悬浮折叠影藏弹窗特效

jQuery制作侧边悬浮折叠影藏弹窗特效
  弹出层
 33537  367

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复