將傳統的Alert 效果美化，下列簡單幾個sample，更多進階sample可參考
官方介紹網址: http://t4t5.github.io/sweetalert/
以及將傳統alert function 做 override，請參考這一篇
1. swal('一般提示訊息!');
2. swal('一般提示訊息!', '小字呈現詳細資訊');
3. swal('尚未選擇照片!','' ,'error');
4. swal('關鍵字已更新完成!','' ,'success');
安裝使用方式，下載套件 https://github.com/t4t5/sweetalert/archive/master.zip
<script src="dist/sweetalert.min.js"></script> <link href="dist/sweetalert.css" rel="stylesheet" type="text/css" />
效果呈現 1.
2.
3.
4.
進階使用可以有下面這些選項參數，
{
title: '',
text: '',
type: null,
allowOutsideClick: false,
showConfirmButton: true,
showCancelButton: false,
closeOnConfirm: true,
closeOnCancel: true,
confirmButtonText: 'OK',
confirmButtonColor: '#8CD4F5',
cancelButtonText: 'Cancel',
imageUrl: null,
imageSize: null,
timer: null,
customClass: '',
html: false,
animation: true,
allowEscapeKey: true,
inputType: 'text',
inputPlaceholder: '',
inputValue: '',
showLoaderOnConfirm: false
}
我來做個範例分享一下，其他就讓各位自行發揮囉~
swal({
title: "刪除照片?",
text: "所選照片都將刪除!",
type: "warning",
showCancelButton: true,
confirmButtonText: "刪除",
cancelButtonText: "取消",
closeOnConfirm: false,
showLoaderOnConfirm: true,
closeOnCancel: true,
allowOutsideClick: true
},
function(isConfirm){
if (isConfirm) {
//這邊是模擬 ajax 請求並回應成功後的function
setTimeout(function(){
$('.listTb').find('input[type="checkbox"]:checked').each(function(){
var id = $(this).val();
$('#'+id).remove();
});
swal("刪除完成!", "所選照片已成功刪除!", "success");
}, 1000);
}
});
