jQuery Eklentisi Yazmak

Daha önce WordPress eklentisi yazmak üzerine bir yazı serisi oluşturmuştum hatırlarsanız. Şimdi de bunu jQuery için tekrarlayacağım. Seri olmayabilir ama basit bir jQuery eklentisi yazmak konusunda sizi bilgilendirmeyi amaçlıyorum. Bazı durumlarda kendi eklentilerinizi yazmak, başkalarının eklentilerini kullanmaktan daha kolay olabiliyor. Çok amaçlı yazılmış javascript dosyaları, örneğin bootstrap siteye ekstra yük yaratabiliyor. Zaten jQuery 190 küsür kilobayt boyuttayken, bir de 100 kilobayta yakın dosya site zaman aşımı açısından sıkıntı oluyor. Bir çok eklenti denememden sonra gerekli gördüğüm bir eklenti yazmıştım. Bootswitch eklentisinin tek yaptığı bootstrap buton grupları arasında komutsal bir aç/kapa işlevi kazandırmak. Eklenti dosyalarına şuradan erişebilirsiniz, demosu için şu linke tıklayın :). Gördüğünüz gibi yaklaşık 2kb boytutunda bu eklenti. Benim için paha biçilemez iş yaptı zamanında.

Siz de bunun gibi bir jQuery eklentisi yazabilirsiniz. Çok basit olanını size aktaracağım. Aşağıda anlatacağım eklentiyle bir linke renk değişikliği komutu vereceğiz. Sonra da bunu özelleştirilebilir yapacağız.

jQuery Eklentisi Yazmak

Aşağıdaki videoyu da izleyebilirsiniz :)

Öncelikle jQuery.noConflict() modunda gitmemiz gerekiyor. Bunun amacı javascript eklentileri ve kütüphaneleri arasında süper popüler olan $ karakterinin çıkartabileceği çakışmaları engellemek. Ayrıca eklentiler (document).ready() fonksiyonunda çağırdığınız basit jQuery kodlarına benzemeyecekleri için kendileri başlı başına bir fonksiyon olmak zorundalar. jQuery kütüphanesi bu fonksiyonun içerisinde $.fn yapsıyla kendi eklenti tanımımızı yapacağımız şekilde yapıyı destekler. Bizim eklentimizin adı “linKrenklendir” olsun. Aşağıda göreceğiniz şekilde bu tanımı $fn.linKrenklendir yapısıyla tanımlayacağız. Ve eklentimizi tüm sitedeki linklerin yeşil renge sahip olması için yapılandıracağız. Hiçbir fazla çabaya gerek kalmadan direkt eklenti içine rengimizi ekleyeceğiz. Buna göre de aşağıdaki en basit haliyle kodumuz şöyle görünecektir.

(function ( $ ) { //Bahsettiğim jQuery.nonConflict durumu için olan başlangıç
    $.fn.linKrenklendir = function() { //fonksiyon tanımımızı yapıyoruz
        this.css( "color", "green" ); //uygulanacak renk bilgisi
        return this;
    };
}( jQuery ));

Aslında bu fonksiyon sadece linkleri değil, uygulanabildiği tüm yazıların renklerini yeşile çevirmeye yarar. Ama biz bunu şimdilik linkler için kullanalım. Bunu bir dosya olarak kaydedelim. linkrenklendir.js adında bir dosyamız olarak dursun bu. Şimdi bunu jQuery ile birlikte sitemizde çağıralım ve uygulayalım.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dosyayiattiginizkonum/linkrenklendir.js"></script>
<script type="text/javascript">
    jQuery.(document).ready(function($){ //site içindeki jQuery.nonConflict kuralını uyguladık.
        $('a').linKrenklendir(); //fonksiyonumuzu çağırdık ve linkleri yeşile boyadık :)
    });
</script>

Gördüğünüz gibi fonksiyonu yazdığımız javascript dosyasını çağırdık ve sonrasında tek yapmamız gereken yazdığımız fonksiyonu istediğimiz elemente, yani tüm linklere uygulamak oldu. Bunu yaptığınızda sitenizdeki tüm linkler yeşil renge bürünecektir. Umarım şimdiye kadar olan kısmı anlatabilmişimdir.

jQuery Eklentisini Geliştirmek

jQuery eklentileri geliştirilebilirler, eklenti için varsayılan değerler atayabilir, kullanıcıların bunu özelleştirebilmesini sağlayabilirsiniz. Örnek olarak, kullanıcılarınız yeşil rengi istemezler ve bunu mor, pembe vb renklere çevirmek isterlerse kullanabilecekleri bir opsiyon yapalım.

Burada işler aslında biraz kafanızı karıştırabilir ama elimden geldiğince düzgün anlatmaya çalışacağım. jQuery eklentileri tıpkı WordPress eklentileri gibi geliştirilebilirler. Bunu sizin belirleyeceğiz varsayılan opsiyonları kullanarak yaparlar. Bu opsiyonlar $.extend fonksiyonuyla tanımlanmaktadır. Biz eklentimiz için sadece bir varsayılan değer gireceğiz. Ve bunu kullanıcı istediği gibi değiştirecek.

Eklentimiz için varsayılan opsiyonların girileceği komut şöyle olacak;

var secenek = $.extend({
    // Varsayılan renk değerimiz.
    renk: "#537E09" 
}, secenekler );

Gördüğünüz gibi burada bir renk tanımı yaptık. Bunu secenek tanımlaması içerisine yerşleştirdik çünkü bunu aşağıda kullanacağız. Yani kullanıcı renk opsiyonuna bir değer verdiğinde bu varsayılan değer yerine geçecek ve yeni değer eklentide kullanılacak. Bunu eklenti alanına eklediğimizde tüm yapı şu şekilde görünecek.

(function ( $ ) {
    $.fn.linKrenklendir = function( secenekler ) { //seçenekleri kullanabilmesi için secenekler tanımını çağırıyoruz

        var secenek = $.extend({
            // Varsayılan renk değerimiz.
            renk: "#537E09" 
        }, secenekler ); // yukarıda kullanacağımız secenekler değerini burada atıyoruz. extend uzantısında

        return this.css( "color", secenek.renk ); //secenek.renk değeri tanımımızdaki varsayılanı çekiyor, şayet eklenti için belirlenirse onu çekicek
    };
}( jQuery ));

Yukarıda eklentimize seçenek ve değeleri atadığımıza göre gelelim kullanımına. Onu da aynen şu şekilde kullanıyoruz. Bu arada jQuery ile atanan renkler css kodları içerisine #537E09 gibi hex kodları da green gibi renk isimleri de verebildiğinizi hatırlatayım. Aşağıdaki kullanım örneğinde ben renk değerini kırmızı rengin karşılığı olan #FF0000 hex kodu kullanacağım.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="yoursitepath/linkrenklendir.js"></script>
<script type="text/javascript">
    jQuery.(document).ready(function($){
        $('a').linKrenklendir({ //eklenti değerlerini atamak için bir iç paranteze ihtiyacımız var { ile bunu sağlıyoruz
        renk : "#FF0000"; //eklentiye kendi renk değerimizi atadık
        });
    });
</script>

En son hale getirdiğimiz kodu alır ve bir javascript dosyası yapar kullanırsanız sanırım doğru şekilde bir eklenti oluşturmuş olacaksınız. Bunun üzeri,nde oynama yapabilir, denemeler sırasında bir sorunuz olursa bana iletişim sayfasından ya da yorum bırakarak ulaşabilirsiniz.

Selametle