jQuery .trigger() Kullanımı
Merhaba Arkadaşlar,
Bu makalede jQuery’nin tetikleme aracı olan trigger’ın nasıl kullanıldığını göreceğiz. Trigger, Sayfa yüklendiğinde, sayfa resize edildiğinde, bir işlemin sonucunda x bir butona tıklanması gerektiğinde, sayfada görünmeyen butonlara tıklanmak istendiğinde kullandığımız bir nesnedir.
Kullanım amaçlarını karşılaştırdığımızda en yoğun kullanım şeklinin gizli butonlara tıklama işlemi yaptırmada olduğunu düşünüyorum. Örneğin üye sayfalarında kullanıcı profil resmi yüklerken standart bir seçim aracı açılıyor. Bunu açmak için de sayfaya bir adet type değeri file olan input eklememiz gerekiyor. Ama bunu eklediğimizde stil olarak bizim sayfamıza uygun olmayan gri bir buton çıkacaktır. Ayrıca içerisinde ki value değeri de sayfayı açan bilgisayarın dil ayarlarına göre değişebilir halde olacaktır. İşte burada trigger’ı devreye sokarak bu butonu gizleyip gerektiği anda tetikleyebiliriz.
Bu uygulamayı yapabilmek için bir adet index.html isimli sayfa oluşturuyoruz ve sayfaya bir adet buton ile link ekliyoruz. Butonu css ile gizliyoruz.
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - jQuery .trigger() Kullanımı</title>
<style>
#file{display: none;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<input type="file" id="file" />
<a href="javascript:;" id="link">Link</a>
</body>
</html>
Daha sonra “#link” id değerine sahip olan linke tıklandığında trigger kullanarak “#file” id değerine sahip olan elemana tıklattıracağız. jQuery kodları şu şekildedir:
$(document).ready(function(){
$("#link").click(function(){
$("#file").trigger("click");
})
});
Bir başka kullanım alanından daha bahsetmek istiyorum. jQuery’de sıklıkla kullandığımız ve yazım şekli itibariyle de kullanmak zorunda olduğumuz “$(document).ready” , “$(window).load” , “$(window).resize” fonksiyonlarında da trigger özelliğini kullanabiliriz. Örneğin “$(window).resize” içerisinde bazı işlemler yaptırdığınızı düşünelim. Sayfa ilk yüklendiğinde resize edilmediği için resize içerisinde yazılan özellikler çalışmayacaktır. Eğer resize içerisinde yazılanlara sayfa yüklendiğinde de ihtiyacınız var ise ya aynı kodları kopyalayarak kod yükünü arttırmanız gerekecek ya da sadece trigger ile resize methodunu çağıracaksınız.
Sayfa resize edildiğinde sayfanın genişliğinin konsola yazıldığını düşünelim. Sayfa ilk yüklendiğinde de konsola sayfa genişliğinin yazılmasını istiyorsak kod yapımız şu şekilde olacaktır:
$(document).ready(function(){
$(window).trigger("resize");
});
$(window).resize(function(){
console.log($(window).width());
});
Tüm Yorumlar