在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

toast消息框插件

分类:插件代码 更新时间:2018-03-23 浏览次数:455

代码简介

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

浏览器兼容

Chrome Firefox Opera Safari IE9+

使用方法

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


                              
 


HTML结构

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

class="btn btn-info m-2" onclick="$.hulla.send('这是一则信息', 'info')">Info


初始化插件

在页面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,
    
});
   



问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!