aşağıdaki gibi 3 farklı şekilde kullanılabilir
$(document).ready(function(){ $("#button1").click(function(){ $("#kutu1").fadeIn(); $("#kutu2").fadeIn("slow"); $("#kutu3").fadeIn(3000); }); });
aşağıdaki gibi 3 farklı şekilde kullanılabilir
$(document).ready(function(){ $("#button1").click(function(){ $("#kutu1").fadeIn(); $("#kutu2").fadeIn("slow"); $("#kutu3").fadeIn(3000); }); });
Ö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>
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); });
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
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);