jquery toastr提示框的使用

来源：互联网发布：java如何实现权限管理编辑：程序博客网时间：2024/05/17 15:36

　toastr是一款非常棒的基于jquery库的非阻塞通知提示插件，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置，在官方站可以通过勾选参数来生成JS，非常的方便使用。

　　学习参考地址：点击打开链接（可在此地址下载插件）

toastr使用

引入核心js文件和css文件

<link href="toastr.css" rel="stylesheet" type="text/css" /><script src="jquery-1.9.1.min.js"></script><!-- jquery文件 --><script src="toastr.js"></script><link rel="stylesheet" href="toastr.min.css">

使用写法示例：

 1 //常规消息提示，默认背景为浅蓝色   toastr.info("你有新消息了!");   2 //成功消息提示，默认背景为浅绿色  toastr.success("你有新消息了!");   3 //警告消息提示，默认背景为橘黄色  toastr.warning("你有新消息了!");   4 //错误消息提示，默认背景为浅红色  toastr.error("你有新消息了!");   5 //带标题的消息框 toastr.success("你有新消息了!","消息提示");

效果图：

编写js代码 <script type="text/javascript">      $(function() {            //设置显示配置          var messageOpts = {              "closeButton" : true,//是否显示关闭按钮              "debug" : false,//是否使用debug模式              "positionClass" : "toast-bottom-right",//弹出窗的位置              "onclick" : null,             "showDuration" : "300",//显示的动画时间             "hideDuration" : "1000",//消失的动画时间             "timeOut" : "5000",//展现时间             "extendedTimeOut" : "1000",//加长展示时间             "showEasing" : "swing",//显示时的动画缓冲方式             "hideEasing" : "linear",//消失时的动画缓冲方式             "showMethod" : "fadeIn",//显示时的动画方式             "hideMethod" : "fadeOut" //消失时的动画方式         };         toastr.options = messageOpts;      }) </script>



另外，弹出位置并不是一成不变的：

toast-top-left  顶端左边2 toast-top-right    顶端右边3 toast-top-center  顶端中间4 toast-top-full-width 顶端，宽度铺满整个屏幕5 toast-botton-right  6 toast-bottom-left7 toast-bottom-center8 toast-bottom-full-width

阅读全文

0 0