手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

Bootstrap 4 仿Mac Growl样式toast消息框插件

时间:2020-07-01    点击: 次    来源:网络    作者:佚名 - 小 + 大

Bootstrap 4 仿Mac Growl样式toast消息框插件
简要教程

Hullabaloo.js是一款基于Bootstrap 4 仿Mac Growl样式toast消息框插件。该jquery插件可以制作出类似Mac系统的toast消息框,并且使用简单。它的特点还有:

  • 支持在三个位置显示消息框:right, center 或 left。
  • 支持6种情景模式:success, info, warning, danger, light, dark。
  • 消息框5秒钟后自动消失。
  • 可自定义图标。
  • 消息框会自动往上滚动。

使用方法

在页面中引入jquery,bootstrap4相关文件,以及font-awsome字体文件,和hullabaloo.js文件。

<link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/font-awesome.min.css"><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script>                               <script src="js/hullabaloo.js"></script>                                               
HTML结构

可以使用一个按钮来触发toast消息框。

<button class="btn btn-info m-2" onclick="$.hulla.send('这是一则信息', 'info')">Info</button>                
初始化插件

在页面DOM元素加载完毕之后,通过new hullabaloo()方法来初始化该插件。

var hulla = new hullabaloo();                

可以通过下面的语法来触发消息框。

hulla.send("Success Message", "success");hulla.send("Info Message", "info");hulla.send("Warning Message", "warning");hulla.send('Danger Message', 'danger')hulla.send('Light Theme', 'light')hulla.send('Dark Theme', 'dark')                

配置参数

Hullabaloo.js 基于Bootstrap 4 仿Mac Growl样式toast消息框插件可用的配置参数有:

var hulla = new hullabaloo({    // where to append the notifications    ele: "body",    // offset    offset: {      from: "top",      amount: 20    },    // or 'center', 'left'    align: "right",    // width    width: 250,    // for auto dismiss    delay: 5000,    allow_dismiss: true,    // space between notification boxes    stackup_spacing: 10,    // notification message here    text: "Notification Message Here",    // Font Awesome icon    icon: "times-circle",    // styles    status: "danger",    // additional CSS classes    alertClass: "",    // callback functions    fnStart: false,     fnEnd: false,    fnEndHide: false,    });                                  

 Hullabaloo.js 基于Bootstrap 4 仿Mac Growl样式toast消息框插件的github地址为:https://github.com/OzyAst/Hullabaloo

 Bootstrap 4 仿Mac Growl样式toast消息框插件 本地下载

上一篇:jQuery消息通知显示插件

下一篇:以Glitch闪烁为过渡动画效果的js轮播图特效

推荐阅读
浙ICP备14024822号  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  电话:13388629007  |  
Copyright © 2020 天人文章管理系统 版权所有,授权www.antqq.com使用 Powered by 55TR.COM