img-20170215-173129.png

將傳統的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.

img-20170215-172441.png

2.

img-20170215-173129.png

3.

img-20170215-171709.png

4.

img-20170215-171855.png

進階使用可以有下面這些選項參數,

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

img-20170216-222200.png

img-20170216-222437.png

img-20170216-222220.png

文章標籤
創作者介紹

樂夫輕鬆遊

樂夫輕鬆遊 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
找更多相關文章與討論