最近发现一个收集了各种jQuery插件的网站,网址:http://www.jq22.com/search?seo=toastr
需要这个插件的原因
在用户填写表单时,能更好的通知用户输入相应的操作,更好的交流。
简单介绍下如何使用
下载地址:
http://www.jq22.com/jquery-info476
插件演示的地址:
http://www.jq22.com/yanshi476
在html中加入以下语句就能使用了。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
用法十分简单
- 信息:toastr.info("内容主体","标题")
- 警告:toastr.warning("内容主体","标题")
- 错误:toastr.error("内容主体","标题")
- 成功:toastr.success("内容主体","标题")
如果想自定义配置的话,需要加入一段js代码。
<script>
toastr.options = {
// 关闭按钮
"closeButton": true,
"debug": false,
//新的通知从上方出现
"newestOnTop": false,
"progressBar": false,
//通知的位置
"positionClass": "toast-top-right",
//重复项
"preventDuplicates": true,
//能否点击
"onclick": null,
//显示的持续时间
"showDuration": "300",
//隐藏的持续时间
"hideDuration": "900",
"timeOut": "4000",
"extendedTimeOut": "1000",
//通知出现的形式
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "slideDown",
"hideMethod": "slideUp"
};
</script>
如果想要更了解的话,可以看看github地址和玩玩demo
网友评论