Bu makale makine çevirisi ayna makalesidir, orijinal makaleye geçmek için lütfen buraya tıklayın.

Görünüm: 20094|Yanıt: 2

[HTML/HTML5] Çok güzel bir uyarı kutusu SweetAlert

[Bağlantıyı kopyala]
Yayınlandı 24.12.2015 12:00:48 | | | |





Sweet Alert, geleneksel Javascrip{filter}t Alert'in yerini alan güzel bir hatırlatma efektidir. SweetAlert otomatik olarak sayfanın ortasına hizalanıyor, böylece masaüstü bilgisayar, telefon veya tablet kullansanız bile harika görünüyor. Ayrıca, esnek kontrol için çok çeşitli özel konfigürasyon seçenekleri mevcuttur.

Nasıl kullanılır:

Giriş:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
O zaman basit bir örnek:

swal({ başlık: "Hata!", metin: "İşte hata mesajım!", yazın: "error", confirmButtonText: "Cool" });
Ekli dosya paketi: sweetalert-master.zip (650.13 KB, İndirme sayısı: 9, 售价: 2 粒MB)

Argüman
Varsayılan değer

Descrip{filter}tion
Başlıknull (zorunlu)Modalın başlığı. Ya "başlık" anahtarı altında nesneye eklenebilir ya da fonksiyonun ilk parametresi olarak geçirilebilir.
MetinsıfırModal için bir tanımlama{filtre}tion. Bu ya "metin" anahtarı altında nesneye eklenebilir ya da fonksiyonun ikinci parametresi olarak geçirilebilir.
türsıfırModalın türü. SweetAlert, karşılık gelen bir simge animasyonunu gösteren 4 dahili tiple geliyor: "Uyarı", "hata", "Başarı" ve "bilgi". Ayrıca " olarak da ayarlayabilirsiniz.Giriş" için bir prompt modal almak için. Ya "type" anahtarının altında nesneye koyulabilir ya da fonksiyonun üçüncü parametresi olarak geçirilebilir.
alpermitEscapeKeytrueEğer ayarlanmışsatrue, kullanıcı, Escape tuşuna basarak modalı kapatabilir.
customClasssıfırModal için özel bir CSS sınıfı. "customClass" anahtarı altında nesneye eklenebilir.
allowOutsideClickfalseEğer ayarlanmışsatrue, kullanıcı, modalin dışına tıklayarak onu kapatabilir.
gösteriCancelButtonfalseEğer ayarlanmışsatrue, "İptal et" butonu gösterilir ve kullanıcı modalı kapatmak için ona tıklayabilir.
showOnay DüğmesitrueEğer ayarlanmışsafalse, "OK/Onayla" butonu gizlenmiş olacak. Bunu kullanırken bir zamanlayıcı ayarladığınızdan veya LowOutsideClick'i true olarak ayarladığınızdan emin olun, böylece kullanıcıyı rahatsız etmeyin.
confirmButtonText"Tamam"Bunu "Onayla" butonundaki metni değiştirmek için kullanın. Eğer showCancelButton doğru olarak ayarlanmışsa, onaylama butonu otomatik olarak "Tamam" yerine "Onayla" gösterir.
onayButtonColor"#AEDEF4"Bunu "Onayla" butonunun arka plan rengini değiştirmek için kullanın (HEX değeri olmalı).
cancelButtonText"İptal Et"Bunu "İptal" butonundaki metni değiştirmek için kullanın.
closeOnConfirmtrueAyarlandıfalseKullanıcı "Onayla" düğmesine bassa bile modalın açık kalmasını istiyorsanız. Bu özellikle "Onayla" düğmesine bağlı fonksiyon başka bir SweetAlert ise faydalıdır.
closeOnCanceltruecloseOnConfirm ile aynı, ama iptal butonu için.
imageUrlsıfırModal için özelleştirilmiş bir simge ekleyin. Görsele giden yolu içeren bir dizi içermeli.
imageSize"80x80"Eğer imageUrl ayarlanmışsa, imageSize'i px'te simgenin ne kadar büyük olmasını istediğinizi belirtmek için belirleyebilirsiniz. İki değerin aralarında "x" ile ayrıldığı bir dizide ilet. İlk değer genişlik, ikincisi yüksekliktir.
ZamanlayıcısıfırModalin otomatik kapanış zamanlayıcısı. Saniyeler ms (milisaniye) cinsinden ayarlanır.
htmlfalseTrue olarak ayarlandığında, başlık ve metin parametrelerinden kaçamaz. (XSS saldırılarından endişeleniyorsanız false olarak ayarlanın.)
AnimasyontrueEğer ayarlanmışsafalse, modalın animasyonu devre dışı bırakılır. Olası (diz) değerler:pop(animasyon doğru olarak ayarlandığında varsayılan olarak),Yukarıdan kaydırma, Dipten kaydırma
inputType"metin"Kullanırken giriş alanının türünü değiştirintype: "input"(Örneğin, kullanıcıların şifrelerini girmesini istiyorsanız bu faydalı olabilir).
inputPlaceholdersıfırGiriş tipini kullandığınızda, kullanıcıya yardımcı olacak bir yer tutucu belirtebilirsiniz.
inputValuesıfırKullanırken girdinizin göstermesini istediğiniz varsayılan bir metin değeri belirtintype: "input"
showLoaderOnConfirmfalseAyarlandıtruedüğmeleri devre dışı bırakmak ve bir şeyin yüklendiğini göstermek için.





Önceki:HTTPS Bunlar (1) HTTPS İlkesi (Yeniden Baskı)
Önümüzdeki:aspx vs. mvc sayfa captcha
 Ev sahibi| Yayınlandı 25.02.2017 18:36:23 |
Yayınlandı 8.12.2017 15:20:55 |
Layui'nin pop çerçevesi de kullanımı iyi hissettiriyor
Feragatname:
Code Farmer Network tarafından yayımlanan tüm yazılım, programlama materyalleri veya makaleler yalnızca öğrenme ve araştırma amaçları içindir; Yukarıdaki içerik ticari veya yasa dışı amaçlarla kullanılamaz, aksi takdirde kullanıcılar tüm sonuçları ödemelidir. Bu sitedeki bilgiler internetten alınmakta olup, telif hakkı anlaşmazlıklarının bu siteyle hiçbir ilgisi yoktur. Yukarıdaki içeriği indirmeden sonraki 24 saat içinde bilgisayarınızdan tamamen silmelisiniz. Programı beğendiyseniz, lütfen orijinal yazılımı destekleyin, kayıt satın alın ve daha iyi orijinal hizmetler alın. Herhangi bir ihlal olursa, lütfen bizimle e-posta yoluyla iletişime geçin.

Mail To:help@itsvse.com