toastr.js插件用法

toastr.js插件用法

toastr.js是一个基于jQuery的非阻塞通知的JavaScript库。toastr.js可以设定四种通知模式：成功、出错、警告、提示。提示窗口的位置、动画效果等都可以通过参数来设置，并且可以在官方网站上通过勾选参数来生成JavaScript代码，操作简单，容易上手，推荐使用。

https://github.com/CodeSeven/toastr

http://www.toastrjs.com

简单调用

简单调用toastr.js插件时，以下几步即可。

①   <link  ref=”stylesheet”  href=”toastr.css”>

②   <script  src=”jquery.js”></script>

③   <script  src=”toastr.js”></script>

④   toastr.info(‘Are  you  the  6  fingered  man?’);

注：toastr.js插件是基于jQuery库的，所以必须在引入toastr.js插件之前引入jQuery库。

复杂案例

①   引入核心文件：

<link href="toastr.css" rel="stylesheet" type="text/css" />

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script src="toastr.js"></script>

 

②   html代码

<input type="button" name="success" id="success" value="成功"/>

<input type="button" name="info" id="info" value="提示"/>

<input type="button" name="warning" id="warning" value="警告"/>

<input type="button" name="error" id="error" value="错误"/>

<input type="button" name="clear" id="clear" value="清除"/>

 

③   jQuery代码

 1 $(function(){
 2 
 3 //参数设置，若用默认值可以省略以下面代
 4 
 5 toastr.options = {
 6 
 7 "closeButton": false, //是否显示关闭按钮
 8 
 9 "debug": false, //是否使用debug模式
10 
11 "positionClass": "toast-top-full-width",//弹出窗的位置
12 
13 "showDuration": "300",//显示的动画时间
14 
15 "hideDuration": "1000",//消失的动画时间
16 
17 "timeOut": "5000", //展现时间
18 
19 "extendedTimeOut": "1000",//加长展示时间
20 
21 "showEasing": "swing",//显示时的动画缓冲方式
22 
23 "hideEasing": "linear",//消失时的动画缓冲方式
24 
25 "showMethod": "fadeIn",//显示时的动画方式
26 
27 "hideMethod": "fadeOut" //消失时的动画方式
28 
29 };
30 
31  
32 
33 //成功提示绑定
34 
35 $("#success").click(function(){
36 
37 toastr.success("祝贺你成功了");
38 
39 })
40 
41        
42 
43 //信息提示绑定
44 
45 $("#info").click(function(){
46 
47 toastr.info("这是一个提示信息");
48 
49 })
50 
51     
52 
53 //敬告提示绑定
54 
55 $("#warning").click(function(){
56 
57 toastr.warning("警告你别来烦我了");
58 
59 })
60 
61       
62 
63 //错语提示绑定
64 
65 $("#error").click(function(){
66 
67 toastr.error("出现错误，请更改");
68 
69 })
70 
71 
72 //清除窗口绑定
73 
74 $("#clear").click(function(){
75 
76 toastr.clear();
77 
78 })
79 
80 });

 

posted @ 2017-04-11 19:36  夜窗听雨  阅读(22323)  评论(1)  编辑  收藏  举报