jquery toastr提示框的使用

　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-left
7 toast-bottom-center
8 toast-bottom-full-width