基于Bootstrap4的Toast提示插件

基于Bootstrap4的Toast提示插件

这是一款基于bootstrap4的toast插件。该插件能非常方便的生成toast提示效果,不需要编写额外的html代码,非常实用。

使用方法

在页面中引入下面的文件。

1
2
3
4
5
6
7
8
9
<!-- CSS -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/toast.min.css">
 
<!-- JavaScript -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js" ></script>
<script src="/path/to/toast.min.js"></script>

初始化插件

通过下面的方法来创建一个toast效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.toast({
  title: 'Notice!',
  subtitle: '11 mins ago',
  content: 'This is a toast message.',
  type: 'info',
  delay: 3000,
  img: {
    src: 'image.png',
    class: 'rounded',
    title: 'Thumbnail Title',
    alt: 'Alternative'
  },
  pause_on_hover: false
});

配置参数

可用的配置参数有:

  • title:标题。
  • subtitle:子标题。
  • content:toast的内容。
  • type:情景类型:'info', 'success', 'warning', 'error'。
  • delay:多少时间后自动消失。
  • img:如果要显示图片,该属性指定图片的信息。
  • pause_on_hover:是否在鼠标悬停时让toast不消失。
温馨提示:此处内容需要评论本文后才能查看。
12

发表评论