帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Bootstrap5 Toast和Snackbar Manager消息提示插件(jQuery Toast.js)

帝国模板之家 2021-04-20 网页特效 评论

插件介绍

Bootstrap5框架中生成Android风格的Toast和Snackbar Manager。

兼容的浏览器

Chrome,IE9 +,FireFox,Opera,Safari

使用方法

1.在Bootstrap 5项目中加载最新的jQuery库(精简版)和Bootstrap 5 Toast插件。

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bootstrap 5 Toast -->
<script src="/path/to/dist/toast.min.js"></script>

2.使用该snack方法创建snackbar。

// $.snack(type, content, delay)
// type: 'info', 'warning', 'success', 'error'

// always shown
$.snack('info', 'Snackbar');

// auto dimiss after 3 seconds
$.snack('info', 'Snackbar', 3000);

3.使用toast方法创建toast消息。

$.toast({
  type: 'info',
  title: 'Title',
  subtitle: '11 mins ago',
  content: 'Toast message.',
  delay: 5000,
  img: {
    src: '/path/to/img.',
    class: 'yourClass',
    alt: 'Image Alt'
  }
});

4.通过覆盖默认参数配置toasts 和 snackbars:

$.toastDefaults = {

  // top-left, top-right, bottom-left, bottom-right, top-center, and bottom-center
  position: 'top-right',

  // is dismissable?
  dismissible: true,

  // is stackable?
  stackable: true,

  // pause delay on hover
  pauseDelayOnHover: true,

  // additional CSS Classes
  style: {
    toast: '',
    info: '',
    success: '',
    warning: '',
    error: '',
  }
  
};
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言