Cara menggunakan sweet alert di html

Berikut perbandingan pesan kesalahan standar. Yang pertama menggunakan fungsi peringatan bawaan, sedangkan yang kedua menggunakan sweetAlert

Table of Contents Show

Lebih banyak contoh
Konfigurasi
Bagaimana cara menggunakan SweetAlert di HTML?
Apa itu SweetAlert di JavaScript?
Bagaimana cara menggunakan peringatan manis di MVC?
Bagaimana cara menggunakan SweetAlert di PHP?

Peringatan biasa

Tampilkan pesan kesalahan

Kode

alert("Oops.. Something went wrong!");

Peringatan Manis

Tampilkan pesan kesalahan

Kode

sweetAlert("Oops...", "Something went wrong!", "error");

Cukup keren ya? . Ini bahkan sangat dapat disesuaikan, seperti yang Anda lihat di bawah

Lebih banyak contoh

Dalam contoh ini, kami menggunakan fungsi singkatan swal untuk memanggil sweetAlert

```
swal("Here's a message!")
```

Judul dengan teks di bawah

Coba saya

swal("Here's a message!", "It's pretty, isn't it?")

Pesan sukses

Coba saya
```
swal("Good job!", "You clicked the button!", "success")
```
_

Pesan peringatan, dengan fungsi yang dilampirkan pada tombol "Konfirmasi".

Coba saya

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

dan dengan melewatkan parameter, Anda dapat menjalankan sesuatu yang lain untuk "Batalkan"

Coba saya

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
	    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

Pesan dengan ikon khusus

Coba saya

swal({
  title: "Sweet!",
  text: "Here's a custom image.",
  imageUrl: "images/thumbs-up.jpg"
});

swal({
  title: "HTML Title!",
  text: "A custom html message.",
  html: true
});

Penggunaan

Inisialisasi plugin dengan mereferensikan file yang diperlukan
_

Panggil fungsi sweetAlert setelah halaman dimuat

sweetAlert("Oops...", "Something went wrong!", "error");

Konfigurasi

Berikut adalah kunci yang dapat Anda gunakan jika Anda mengirimkan objek ke sweetAlert

ArgumentNilai defaultDeskripsititlenull (wajib)Judul modal. Itu dapat ditambahkan ke objek di bawah kunci "judul" atau diteruskan sebagai parameter pertama dari fungsi. textnullA deskripsi untuk modal. Itu dapat ditambahkan ke objek di bawah tombol "teks" atau diteruskan sebagai parameter kedua dari fungsi tersebut. typenullJenis modal. SweetAlert hadir dengan 4 tipe bawaan yang akan menampilkan animasi ikon yang sesuai. "peringatan", "kesalahan", "sukses" dan "info". Itu bisa dimasukkan ke dalam array di bawah kunci "type" atau diteruskan sebagai parameter ketiga dari fungsi. allowEscapeKeytrueJika disetel ke true, pengguna dapat menutup modal dengan menekan tombol Escape. customClassnullA kelas CSS khusus untuk modal. Itu dapat ditambahkan ke objek di bawah kunci "customClass". allowOutsideClickfalseJika disetel ke true, pengguna dapat menutup modal dengan mengklik di luarnya. showCancelButtonfalseJika disetel ke true, tombol "Batal" akan ditampilkan, yang dapat diklik pengguna untuk menutup modal. confirmButtonText"OK"Gunakan ini untuk mengubah teks pada tombol "Confirm". Jika showCancelButton disetel sebagai true, tombol konfirmasi akan secara otomatis menampilkan "Konfirmasi", bukan "OK". confirmButtonColor"#AEDEF4"Gunakan ini untuk mengubah warna latar belakang tombol "Konfirmasi" (harus berupa nilai HEX). cancelButtonText"Cancel"Gunakan ini untuk mengubah teks pada tombol "Cancel". closeOnConfirmtrueSet ke false jika Anda ingin modal tetap terbuka meskipun pengguna menekan tombol "Konfirmasi". Ini sangat berguna jika fungsi yang melekat pada tombol "Konfirmasi" adalah SweetAlert lainnya. imageUrlnullTambahkan ikon khusus untuk modal. Harus berisi string dengan jalur ke gambar. imageSize"80x80"Jika imageUrl disetel, Anda dapat menentukan imageSize untuk menjelaskan seberapa besar ikon yang Anda inginkan dalam px. Berikan string dengan dua nilai yang dipisahkan oleh "x". Nilai pertama adalah lebarnya, yang kedua adalah tingginya. timernullAuto menutup timer dari modal. Diatur dalam ms (milidetik). htmlfalseJika disetel ke true, tidak akan lolos dari parameter judul dan teks. (Atur ke salah jika Anda khawatir tentang serangan XSS. )animationtrueJika disetel ke false, animasi modal akan dinonaktifkan

Metode

SweetAlert juga hadir dengan beberapa metode sederhana yang bisa Anda panggil

FunctionExampleDescriptionsetDefaultsswal. setDefaults({ confirmButtonColor. '#0000' });Jika Anda akhirnya menggunakan banyak pengaturan yang sama saat memanggil SweetAlert, Anda dapat menggunakan setDefaults di awal program Anda untuk mengaturnya sekali dan untuk selamanya. closeswal. close();Tutup Sweet Alert yang saat ini terbuka secara terprogram

Menyumbang

SweetAlert dibuat oleh Tristan Edwards, Anda dapat mengikutinya di atau Dribbble untuk pembaruan dan proyek keren lainnya

Bagaimana cara menggunakan SweetAlert di HTML?

Setelah perpustakaan diatur, membuat pesan SweetAlert menjadi sangat mudah. Yang harus Anda lakukan adalah memanggil fungsi swal() . swal("Ini ada pesan. ", " Semoga harimu menyenangkan. ")

Apa itu SweetAlert di JavaScript?

Sweet Alert adalah cara menyesuaikan lansiran di game dan situs web Anda . Ini memungkinkan Anda untuk mengubah dari tombol JavaScript standar. Kami dapat menambahkan tombol, mengubah warna teks, dan bahkan menambahkan peringatan tambahan yang berubah tergantung pada klik pengguna.

Bagaimana cara menggunakan peringatan manis di MVC?

Dalam ini pilih “ASP. NET MVC 4 Web Application” setelah memilih nama Proyek Anda sebagai “SweetAlertSite” dan terakhir klik tombol OK untuk membuat proyek . Setelah mengklik tombol OK wizard pemilihan template proyek lainnya akan muncul dengan nama “New ASP. Proyek .NET MVC 4”.

Bagaimana cara menggunakan SweetAlert di PHP?

Untuk menggunakannya di php Anda dapat menggunakan kode berikut. Pertama, Anda harus menyertakan pustaka sweetalert seperti yang telah saya sertakan. Kemudian Anda dapat menggunakan sweet alert seperti yang saya gunakan di gema . Sweetalert tidak memuat sampai elemen dom dimuat.