<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="清除"/> 給按鈕綁定事件 $(function(){ //參數設置,若用默認值可以省略以下面代 toastr.options = { "closeButton": false, //是否顯示關閉按鈕 "debug": false, //是否使用debug模式 "positionClass": "toast-top-full-width",//彈出窗的位置 "showDuration": "300",//顯示的動畫時間 "hideDuration": "1000",//消失的動畫時間 "timeOut": "5000", //展現時間 "extendedTimeOut": "1000",//加長展示時間 "showEasing": "swing",//顯示時的動畫緩沖方式 "hideEasing": "linear",//消失時的動畫緩沖方式 "showMethod": "fadeIn",//顯示時的動畫方式 "hideMethod": "fadeOut" //消失時的動畫方式 }; //成功提示綁定 $("#success").click(function(){ toastr.success("祝賀你成功了"); }) //信息提示綁定 $("#info").click(function(){ toastr.info("這是一個提示信息"); }) //敬告提示綁定 $("#warning").click(function(){ toastr.warning("警告你別來煩我了"); }) //錯語提示綁定 $("#error").click(function(){ toastr.error("出現錯誤,請更改"); }) //清除窗口綁定 $("#clear").click(function(){ toastr.clear(); }) })