jquery toastr彈窗的代碼和使用


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM