SweetAlert là phương pháp tùy chỉnh cảnh báo trong ứng dụng, trang web và trò chơi của bạn. Nó cho phép người dùng thay đổi nó bằng nút JavaScript tiêu chuẩn. Bạn có thể thêm một nút mới vào nút đó, thay đổi màu nền của nút, thay đổi văn bản của nút và thêm các cảnh báo bổ sung phụ thuộc vào lần nhấp của người dùng. Bạn cũng có thể đặt các biểu tượng có thông báo cảnh báo của mình trong đó
SweetAlert là sự thay thế cho "cửa sổ. alert[]" của JavaScript hiển thị các cửa sổ bật lên theo phương thức tuyệt vời. Nó là một thư viện độc lập không có phần phụ thuộc và bao gồm một tệp JavaScript cộng với một tệp CSS
Cài đặt SweetAlert
NPM là phương pháp được đề xuất để cài đặt SweetAlert kết hợp với các công cụ như BrowserWise hoặc Webpack
Sau đó, chỉ cần nhập nó vào dự án và ứng dụng của bạn
Bạn cũng có thể lấy liên kết CDN cho phiên bản mới nhất của thư viện và đưa nó vào trang web của mình bằng cách sử dụng thẻ tập lệnh
Ngoài tệp JavaScript, bạn cũng phải tải tệp CSS, tệp này được sử dụng để thiết kế tất cả các hộp cảnh báo do thư viện tạo
Sau khi thư viện được thiết lập, việc tạo thông báo SweetAlert rất dễ dàng. Tất cả những gì bạn phải làm là gọi hàm swal[]
Các ví dụ của sweetalert
Ví dụ cơ bản
1. Cảnh báo tin nhắn đơn giản
2. Nếu bạn chuyển hai đối số cho hàm swal[], đối số đầu tiên sẽ là tiêu đề của mô hình và đối số thứ hai là văn bản của mô hình, được hiển thị bên dưới
Thông báo lỗi và thành công
Tùy chỉnh nút xác nhận
Bạn có thể chọn nhiều tùy chọn để định cấu hình mã cảnh báo của mình. Ví dụ: bạn có thể thay đổi văn bản trên nút xác nhận
Thông báo cảnh báo có chức năng gắn với nút “Xác nhận” và nút “hủy”
Thông báo cảnh báo có biểu tượng tùy chỉnh
Thay thế chức năng "nhắc nhở"
swal[] với nút gif của trình tải [đối với yêu cầu AJAX]
Sử dụng phản ứng
Với cú pháp JSX, nếu bạn đang sử dụng SweetAlert, bạn sẽ cần cài đặt React
Sau đó, rất dễ dàng để nhập SweetAlert
Cú pháp JSX thay đổi tùy chọn nội dung của mô hình, vì vậy bạn vẫn có thể sử dụng các tính năng khác của SweetAlert
Trong hướng dẫn này, chúng ta sẽ thảo luận về Cách sử dụng cảnh báo ngọt ngào bằng PHP. Trước tiên, bạn phải bao gồm thư viện cảnh báo ngọt ngào như tôi đã bao gồm. Cảnh báo ngọt ngào không tải cho đến khi các phần tử dom được tải. Sau đây mình sẽ chia sẻ cách sử dụng Sweet Alert bằng PHP. Vì vậy, ví dụ sau
Sử dụng tùy chọn
How to use sweet alert using PHP - Devnote.in
How to use sweet alert using PHP - Devnote.in
$[document].ready[function[] {
swal[{
title: "User created!",
text: "Suceess message sent!!",
icon: "success",
button: "Ok",
timer: 2000
}];
}];
Sử dụng lời hứa
How to use sweet alert using PHP - Devnote.in
How to use sweet alert using PHP - Devnote.in
$[document].ready[function[] {
swal[{
title: "Are you sure!",
text: "Do you really want to remove user!",
icon: "warning",
buttons: true,
dangerMode: true,
}].then[[willDelete] => {
if [willDelete] {
swal["Yaa! User successfully deleted!", {
icon: "success",
}];
} else {
swal["User not deleted your user is safe!", {
icon: "error",
}];
}
}];
}];
Thể loại
jQueryPHPsweetalert