SweetAlert詳解

  官方給出的SweetAlert介紹是：SweetAlert可以替代JavaScript原生的alert和confirm等函數呈現的彈出提示框，它將提示框進行了美化，並且允許自定義，支持設置提示框標題、提示類型、內容展示圖片、確認取消按鈕文本、點擊后回調函數等。我用過之后覺得確實好用，因此極力推薦此插件。我將它的用法總結如下：

        彈出一個alert的寫法：

        其一： swal("恭喜","添加成功","success"); 第一個參數是title，第二個參數是text，第三個參數是提醒類型（success,error,warning,input），三個參數皆非必寫項。最簡便寫法：swal("");就彈出一個框，上面有個確定按鈕。不可寫作：

swal();

 

      

 

       其二：

       swal({
                title:"恭喜",
                text:"添加成功",
                type:"success"

        });

       參數還可以寫：

       html：是否支持html，默認false,寫成true以后，text里就可以寫html元素。下面給一個例子

 

      

 

       showCancelButton：是否顯示取消按鈕；

       animation：提示框彈出時的動畫效果，可選（pop、none、slide-from-top、slide-from-bottom）；

       timer：設置自動關閉提示框時間（毫秒）；

       showConfirmButton：是否顯示確定按鈕；

       confirmButtonText：定義確定按鈕文本；

       cancelButtonText：定義取消按鈕文本；

       imageUrl：定義彈出框的圖片地址；

       回調函數：done()和error.

       下面給出一個confirm窗體帶回調函數的例子：

function deleteArticle(id){
       var serverAddress=serverAddressPath+'/api/arc/delete.shtml';
       swal({
          title:"",
          text:"確定刪除嗎？",
          type:"warning",
          showCancelButton:"true",
          showConfirmButton:"true",
          confirmButtonText:"確定",
          cancelButtonText:"取消",
          animation:"slide-from-top"
        }, function() {
               var ids=new Array();
        ids.push(id+"");
        $.ajax({
            type:"post",
            url:serverAddress,
            traditional: true,
            dataType:"json",
            data:{"id":ids}
        }).done(function(data) {
                  swal("操作成功!", "已成功刪除數據！", "success");
                  getMyArtic();
               }).error(function(data) {
                  swal("OMG", "刪除操作失敗了!", "error");
               });
         });
      }