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

网页特效

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

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

好看的jQuery动画Toast插件

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

插件介绍

jQuery创建可自定义的动画Toast插件,可帮助您在网页上创建Android Material样式的警报通知。

更多功能:
自定义位置。
倒计时器。
5种通知类型。
动态更改吐司消息。
支持HTML内容,不仅纯文本。

兼容的浏览器

Chrome,IE9 +,FireFox,Opera,Safari

使用方法

1.将jQuery Nice Toast插件的文件导入文档。

<!-- Include Plugin CSS file -->
<link href="./dist/css/nice-toast-js.min.css" rel="stylesheet" />
<!-- Include jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Include Plugin JS file -->
<script src="./dist/js/nice-toast-js.min.js"></script>

2.使用以下方法创建不同类型的Toast。

// default
$.niceToast('Toast Message Here');

// info
$.niceToast.info('Toast Message Here');

// success
$.niceToast.success('Toast Message Here');

// warning
$.niceToast.warning('Toast Message Here');

// error
$.niceToast.error('Toast Message Here');

3.更改toast的位置。

居中(默认)
右上
左上方
底部中心
右下
右下

$.niceToast.setup({
  position: "top-center"
});

4.确定toast持续多长时间。默认情况下,toast消息将在5秒钟后自动关闭。

$.niceToast.setup({
  timeout: 10000
});

5.确定是否在每个toast消息的底部显示倒数计时器。默认值:true。

$.niceToast.setup({
  progressBar: false
});

6.动态更改toast消息。

let toast = $.niceToast('Toast Message Here');
toast.change('redirecting ...' ,2000)
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

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

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

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