toastr.js插件用法
toastr.js是一个基于jQuery的非阻塞通知的JavaScript库。toastr.js可以设定四种通知模式：成功、出错、警告、提示。提示窗口的位置、动画效果等都可以通过参数来设置，并且可以在官方网站上通过勾选参数来生成JavaScript代码，操作简单，容易上手，推荐使用。
https://github.com/CodeSeven/toastr
简单调用
简单调用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 });