Sayfa Yüklenince Toast yada Butona Tıklayınca Toast Örnekleri

Öncelikle jQuery toast plugin yazarı by Kamran Ahmede emeğinden dolayı teşekkür ederiz. Genel olarak başarılı bir eklenti olmuş kolaylıkla projelerine adapte edebilirsiniz projeyi arkadaş sadece butonlara tıklanma ile beraber tetiklenecek şekilde ayarlamış ama ben vereceğim örnekle sayfa yüklenince de toast mesajı görüntülenebilecek şekilde ayarladım.

Örneğin bir site içi mesajlaşma uygulamanız var yeni mesaj geldiğinde ekrana toast basmak için ilgili if yapısının içerisine hazırladığım 2. demodaki çalışmanın kaynak kodunu kullanabilirsiniz.

Projenin Kaynağı: https://kamranahmed.info/toast

DEMO1 – VARSAYILAN HALİYLE TÜM ÖRNEKLER

DEMO2 – SADECE SAYFA YÜKLENİNCE ÇALIŞACAK TOAST ÖRNEĞİ

2. DEMODA toast görünmesini sağlayan kod:

    <script type="text/javascript">
        $(document).ready(function() {
 
$.toast({
    heading: 'Information',
    text: 'Yeni Mesajınız var lütfen mesaj kutunuzu kontrol ediniz. <a href="#">tıklayın</a>',
	position: 'mid-center',
	icon: 'info',
    stack: false
})
 
    });
    </script>

burada dikkat edilecek nokta bu kod blogunun hemen yukarısında mutlaka ilgili jquery dosyaları include edilmiş olması gerekir aksi halde çalışmayacaktır.

ilgili jquery kod blogu:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.toast.js"></script>

JavaScript ile Dizi Oluşturma ve For Döngüsü

dizi.length ile oluşturulan dizinin boyutunu buluyoruz. Akabinde bilindik for döngüsünde kullanıyoruz dizi içeriği kaç adetse o kadar çalışıyor.

Örnek Uygulama

var dizi = ['ali', 'soyad', 35, 0.5];
console.log(dizi.length);
 for (var i = 0; i<dizi.length; i++) {
     console.log(dizi[i]);
 }

Callback fonksiyon kullanarak yazdırmak istersek:

dizi.forEach(function (k) {
    console.log(k);
});

setTimeout ile Belli bir süre sonra başlayan fonksiyon yazma

JavaScript’te x saniye sonra çalıştırmak istediğiniz fonksiyonlar için iki farklı yazımını yaptığım şu fonksiyonu kullanabilirsiniz

1. Kullanım şekli:

setTimeout( function () {
 
    console.log("çalışıyor");
 
}, 3000)

2. Kullanım Şekli:

var baslat = function () {
 
    console.log ("çalışıyor");
}
 
setTimeout(baslat, 3000);

3000 = 3 saniye

JavaScript setInterval Fonksiyon Kullanımı

Bir işlemi belli aralıklarla tekrarlamak bir fonksiyonu x saniyede 1 kere çağırmak gibi çok amaçlarda günü kurtaran bir fonksiyondur.

Örneğin aşağıdaki kullanımda program 10’a kadar sayacaktır kendinize göre uyarlayabilirsiniz

var s = 1;
var interval = setInterval(function () {
 
    if(s== 10) {
        clearInterval(interval);
    }
 
    console.log("sayınız "+ s);
    s++;
 
}, 1000);