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 });