js消息提示框插件-----toastr用法

 （本文系轉載）

因為個人項目中有一個提交表單成功彈出框的需求，從網上找了一些資料，發現toastr這個插件的樣式還是不錯的。所以也給大家推薦下，但是網上的使用資料不是很詳細，所以整理了一下，希望能給大家帶來幫助。

toastr

官網 http://codeseven.github.io/toastr/

這個樣式插件支持直接導cdn入鏈接，但是我嘗試了一下cdn加載速度太慢，所以推薦直接下載文件后導入文件

個人演示地址，因為把js放在了頭部所以加載時間可能有點長，而且我發現自己的服務器不是很穩定，所以多多包涵。

http://47.94.153.112/

整個過程共分為４ 步

1.導入文件

2.頁面中頭部導入插件

3.配置樣式

4.編寫觸發方式

1.導入文件，這是我測試的文件

2.頁面頭部導入插件，必須導入jQuery，因為toastr是依賴於jQuery的

3.配置樣式，默認樣式就已經不錯，主要配置彈出位置positionClass這一項，主要有top,bottom以及修飾它們的right，left，center這幾個關鍵詞。

< script type= "text/javascript">

$( function(){

toastr. options= {

"closeButton": false, //顯示關閉按鈕

"debug": false, //啟用debug

"positionClass": "toast-top-center", //彈出的位置

"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( "錯誤樣式");

  //帶標題的消息框
 toastr.success("你有新消息了!","消息提示");
  
  //另一種調用方法
 toastr["info"]("你有新消息了!","消息提示");

})

$( "#clear"). click( function(){

toastr. clear(); //清楚當前頁面彈出框

})

});

</ script>

4.編寫觸發方式，因為JS中已經配置了onclick的觸發方式，所以直接用button測試了，當然js的觸發方式很多，可以按需選擇。為了方便查看我這里用bootstrap配置了按鈕樣式。

< button class= "btn btn-success" name= "success" id= "success"> 成功 </ button>

< button class= "btn btn-info" name= "info" id= "info">提示</ button>

< button class= "btn btn-warning" name= "warning" id= "warning">警告</ button>

< button class= "btn btn-danger" name= "error" id= "error">錯誤</ button>

< button class= "btn btn-primary" name= "clear" id= "clear">清除</ button>

5.運行查看效果

一個靜態的頁面樣式就這樣配置好了。

如果需要給動態頁面添加樣式，只需要用JS配置一下接收就好了

function msg() {
var url=location.search;
if(url.indexOf("?") != -1) {
    var str=url.substr(1);
    strs=str.split("=");
    var a=strs[1];
}
if(a==1){
    toastr.success("操作成功");
}
if(a==2){
    toastr.warning("請稍后再試");
}
}

 

這是一個簡單通過連接追加的參數顯示的示例，當然還有很多除了連接參數的方式，比如JSP中直接獲取一個對象值也是可以的。