jQuery ile eklenti yazma

Merhaba arkadaşlar uzun süreden beri kafama takılıyordu bazen sıkıntıda çıkarıyordu yazdığım javascript yada jQuery kodlarını eklenti haline getirmeyi planlıyordum yazdığım kodu kullanmak sıkıntı çıkarıyordu bende oturdum karar verdim hepsini eklenti haline getiricem dedim bunu yaparkende blog'da jQuery ile nasıl eklenti yazılır diye kısa bir özet geçeyim dedim.

Öncelikle yazdığımız yada önce yazılan eklentiler bizi kat kat hızlandırır ilk başta hemen tüm ihtimalleri düşünmek yazmak sıkıcı yada zor gelebilir ama 1 kere yaptıktan sonra gerisi kolay.

Öncelikle eklenti adımızı belirleyelim mesela degistir adında bir eklenti yapalım ve kullanıcı istediği nesneye ister renk ister genişliğini değiştirebilsin.

Hemen başlıyoruz.

$.fn.degistir = function(){

 return $(this).each(function(index, element) {

       //Eklenti ile ilgili kodlar burada yazılır

    });

}

Bu yazdığımız kalıp sabittir $.fn.degistir kırmızı ile yazan 'degistir' kısmı eklentimizin adıdır.
Mesela bir div olsun ve div seçildiğinde rengini değiştirelim.

<div id="kare"></div>

Ardından bu divde fonksiyonumuzu çalıştıralım.

$.fn.degistir = function(settings){
     
var varsayilan = {
     gorev : "renk",
     renk : "#000",
     genislik : "100px",
     zaman : 1000
 }
 
$.extend(varsayilan,settings);
 
return $(this).each(function(index, element) {
if(varsayilan.gorev == "renk") //Eger gorev renk ıse css ıle renk degıstır
{
     $(this).hide().css("background-color",varsayilan.renk).fadeIn();
}
    else //Degılse genıslık degıstır dıyoruz
{
    $(this).animate({"width":varsayilan.genislik},varsayilan.zaman);
}
});
}

$("#kare").degistir();

Şimdi div'imize eklentimizi uyguladık ama eklediğimiz 2 3 satır kod ne işe yarıcak ?
onlar bazı parametreleri kullanıcılardan almamızı sağlar mesela rengi, genişliği yada animasyonun yapılacagı sureyı ayarlamayı kullanıcıya bıraktık kullanıcı ellemez ise varsayılan deger olarak bizim yazdıgımız devreye giricek.

Not: Kod kısmında koyu renkte yazılan yerler birbirleriyle bağlantılıdır.

Fonksiyonumuzdan parametre yollamak için ise

$("#kare").degistir({gorev:"renk",renk:"#CCC"});

Şeklinde kullanabiliriz.
Demo Halini görmek için tıklayın.