Sweet Alert Sınıfı Kullanımı Detaylı Anlatım Tüm Argümanları ile birlikte

Merhaba klasik uyarı pencerelerinden sıkılanlar için, mobil uyumlu sweetalert sınıfından bahsedeceğim.. Sweetalert i PHP içerisinde nasıl kullanırım diye meraklanan var ise PHP Morris Js konusunu incelesin, en azından kafanızda birşeyler patlar :D Öncelikle dosyaları projemize dahil ediyoruz.

<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Uyarı verdirmek istediğimiz yeri seçiyoruz.Butona tıklayınca çıksın istedim.
<button>Tıkla Bana</button>
Daha sonra jquery kodlarımızı yazıyoruz.
<script type="text/javascript">
          
          $(function() {
            
             $("button").click(function() {
                  
                   sweetAlert ({
                        
                        title : "Bu Bir Başlıktır",
                        text  : "Burası <b>Açıklama</b> Kısmıdır adamcoder.net",
                        allowEscapeKey : "true", // false değeri alırsa esc kapatmaz
                        customClass : ".sınıf", // <button class="sınıf"> gibi :)
                        allowOutsideClick : "false", // true yaparsak nereye tıklarsak uyarı kapanır
                        showCancelButton : "false", // true yaparsak cancel butonu görünür
                        showConfirmButton : "true", // Ok butonunu gösterir false yaparsanız görünmez
                        confirmButtonText :"Tamamdır", // ok butonunun yerine istediğnizi yazarsınız
                        confirmButtonColor : "#AEDEF4", // Ok butonunu rengini değiştirebilirsiniz
                        cancelButtonText : "Geri Git",  // Cancel Butonun yerine istediğimizi yazabiliriz.
                        closeOnConfirm :"true",// Okeye basıldıysa burayı göster şurayı göster gibi 
                        closeOnCancel :"true", // cancele basılırsa şurayı göster gibi(if else gibi)
                        imageUrl :"https://a2-images.myspacecdn.com/images03/21/026f6a3d1a084b95bcda8e277a7cb743/300x300.jpg", // pencere resmini değiştirir
                        imageSize :"100x100", // resmin boyutunu ayarlar
                        timer: "10000", // 4 saniyede uyarı penceresini kapatır
                        html : "true"

                // diğer ayarları bu şekilde test ederek öğrenebilirsiniz. Bu işler kurcalamadan olmaz : )
                
                   });
            })


    })
    </script>
Argüman Ne İş Yapar
title Uyarının başlık kısmıdır.
text Uyarının Mesaj Kısmıdır.
type "warning", "error", "success" "info" ve dilerseniz input değeride verebilirsiniz. Uyarı mesajlarınızda işinize yarar
allowEscapeKey Bu değer ESC tuşuyla uyarı penceresini kapatabiliyoruz. False değeri vererek bu kuralı uygulamayabilirsiniz
customClass Bu değer uyarınıza bir sınıf atayarak özelleştirmenize yarar.
allowOutsideClick Bu değer uyarı pencerenin dışına tıklanırsa pencereyi kapatmanıza yarar, varsayılan değer olarak false gelir true yaparsanız nereye tıklarsanız tıklayın pencere kapanır.
showCancelButton showConfirmButton confirmButtonText confirmButtonColor cancelButtonText showCancelButton -> Türkçesiyle :) Geri butonunu göstereyim mi abi diyor ;D
showConfirmButton -> Türkçesiyle Tamam butonunu göstereyim mi abi diyor
confirmButtonText -> Tamam butonu yerine istediğinizi yazabilirsiniz "Kabul Ediyorum" vs gibi
cancelButtonText -> Geri(iptal) butonu yerine istediğinizi yazabilirsiniz "Kabul Etmiyorumm" vs gibi
confirmButtonColor -> Tamam Butonu rengini değiştirebilirsiniz. HEX renk kodları seçmeniz öneriliyor. #DDDFFF gibi
imageUrl Bu değer uyarıya varsayılan olarak gelen resimleri kendi isteğimize göre değiştirmemize yarıyor.
imageSize Bu değer uyarıya verdiğimiz resimlerin genişlik ve yüksekliğini ayarlamamıza yarıyor. 100x100 gibi.
timer Bu değer uyarı milisaniye cinsinden uyarıyı otamatik olarak kapatmaya yarıyor 1000 (1 snyede kapatır)
html Bu değer uyarı HTML kodları kullanmamıza yarıyor
animation Bu değer uyarı Animasyon açılış ekranını değiştiriyor. Pek birşey farkettirmiyor gibi
inputType Bu değer İnput lara yazdığımız değerleri girebiliyoruz. Text,Password,Submit vs gibi
inputPlaceholder Bu değer İnput ların içerisine açıklama yazısı girebilmemize yarıyor.
inputValue Bu değer İnput lara değer vermek için kullanılıyor.
closeOnConfirm closeOnCancel Bu değerler Uyarı Penceresinde ikinci bir pencere açmaya yarar
Örnek Dosyayı İndirebilirsiniz

Hiç yorum yok:

Yorum Gönder

Follow by Email

×

Reklam engelleyici uygulamalarını, blog sitemiz için kapatarak çalıştırın lütfen.

Bunu yapmak için; Reklam Engelleyici Bildirim Listesi sayfasına giderek yapabilirsiniz.

Teşekkürler!

×