Custom thông báo alert với plugin Sweetalert

Khi tiến hành lập trình các chức năng website, không thể tránh khỏi phát sinh các thông báo cho người dùng biết, thường sử dụng hàm alert của jquery. Hôm nay mình chỉ các bạn custom thông báo alert cho đẹp với plugin Sweetalert
  • 15:47 31/10/2016
  • Kỳ Nhân
  • 0 Bình luận
  • 970

Trước tiên các bạn so sánh 2 thông báo bằng hàm alert() trong jquery và bằng plugin SweetAlert

Alert bình thường

alert("Lỗi... không xử lý được!");
            

sweetalert

sweetAlert("Lỗi", "không xử lý được!", "error");
            

Thông báo bằng SweetAlert hoàn toàn tương thích với máy bàn, di động và hoàn toàn tùy chỉnh theo ý thích, lại rất đẹp

Một số ví dụ về cách sử dụng plugin SweetAlert

Thông báo đơn giản

swal("Đây là thông báo!");

Thông báo với tiêu đề và text bên dưới

swal("Xin chào!", "Ban ở đâu?")

Thông báo thành công

swal("Thành công!", "Bạn đăng ký ok!", "success")

Cảnh báo và nút xác nhận

swal({
  title: "Bạn chắc xóa?",
  text: "File sẽ xóa hoàn toàn!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Ok! Xóa ngay",
  closeOnConfirm: false
},
function(){
  swal("Deleted!", "Đã xóa.", "success");
});

Thông báo với icon tùy chỉnh

swal({
  title: "Thông báo!",
  text: "Hình custom.",
  imageUrl: "thumbs-up.jpg"
});

Thông báo với html tùy chỉnh

swal({
  title: "HTML <small>Title</small>!",
  text: "A custom <span style='color:#F8BB86'>html<span> message.",
  html: true
});

Tự động tắt thông báo sau thời gian quy định

swal({
  title: "Tự động tắt thông báo!",
  text: "Thông báo tự tắt sau 2s",
  timer: 2000,
  showConfirmButton: false
});

Thông báo dựa theo nhập vào

swal({
  title: "Nhập vào!",
  text: "Ghi vài từ:",
  type: "input",
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top",
  inputPlaceholder: "Viết gì đó"
},
function(inputValue){
  if (inputValue === false) return false;
  if (inputValue === "") {
    swal.showInputError("Bạn cần ghi gì đó!");
    return false
  }
  swal("Hoàn thành!", "Bạn viết: " + inputValue, "success");
});

Load Ajax sau khi đồng ý

swal({
  title: "Ajax khi ok",
  text: "nhấn ok là gửi ajax",
  type: "info",
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
},
function(){
  setTimeout(function(){
    swal("viết ajax tại function này rồi alert tại succes ajax nha!");
  }, 2000);
});

Bạn có thể down load plugin tại đây: Download

Hoặc tại trang chủ http://t4t5.github.io/sweetalert/