Bootstrap3 Toast消息框插件

当前位置:主页 > jQuery库 > 布局和界面 > Bootstrap3 Toast消息框插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
Bootstrap3 Toast消息框插件
分享:

    插件介绍

    Bootoast是一款Bootstrap3 Toast消息框插件。通过Bootoast插件你可以非常方便的制作Toast消息框效果,并且插件提供了各种参数来控制Toast消息框。

    浏览器兼容性

    浏览器兼容性
    时间:2017-08-05
    阅读:
简要教程

Bootoast是一款Bootstrap3 Toast消息框插件。通过Bootoast插件你可以非常方便的制作Toast消息框效果,并且插件提供了各种参数来控制Toast消息框。

使用方法

在页面中引入bootstrap.min.css文件,bootoast.css,以及jquery和bootoast.js文件。

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootoast.css">
<script src="jquery.min.js"></script>
<script src="bootoast.js"></script>
                
API

Bootoast插件的默认配置如下:

bootoast({
    message: 'Helo!',
    type: 'info',
    position: 'bottom-center',
    icon: undefined,
    timeout: false,
    animationDuration: 300,
    dismissable: true
});
                

配置参数

参数 默认值 描述
message 'Helo!' Toast消息,可以是任何html字符串。
type 'info' bootstrap情景类的class名称。
icon 根据选择的情景类来决定。 Bootstrap 3 glyphicons名称。
position 'bottom-center' Toast消息显示的位置。可以是top,left-top,right-top,bottom,left-bottom,right-bottom。
timeout false Toast自动隐藏的时间。设置为false或0表示不会自动隐藏。
dismissable true 是否在Toast上显示×按钮。
animationDuration 300 Toast隐藏动画的持续时间,单位毫秒。

Bootoast-Bootstrap3 Toast消息框插件的github地址为:https://github.com/odahcam/bootoast

网友评论