jQuery için Plugin Hazırlama

Cumartesi, 11 Eyl 2010 yorum ekle yorumlara git

jQueryMerhaba!

Bu yazımda nasıl jQuery plugini yapıldığından bahsedeceğim ve birlikte basit bir plugin yapacağız. Sağ tarafta gördüğünüz Kategoriler menüsündeki efekt için plugin yazacağız. Uygun bir isim bulamadım, o yüzden ad ve soyadımın baş harfleri olan hk adını verdim plugine :) Neyse, önemli olan ismi değil zaten.

Sayfamıza jQuery dosyasını dahil ettiğimizi varsayarak hemen bir jQuery plugininin genel yapısı nasıldır, onu gösterelim. Aşağıdaki örnekte plugine verilen elementlerin renklerini gri yapıyoruz.

$.fn.plugin_ismi = function(){
    this.css('color', 'gray');
};
$('p').hk();

Gördüğümüz gibi plugin fonksiyonumuz içerisindeyken seçilen elemanlara ulaşmak için this anahtar sözcüğünü kullanıyoruz. Plugini bu şekilde bırakırsak zincirleme metod yapısını kullanamayız, çünkü pluginden geriye herhangi bir şey döndürmüyoruz. İsterseniz pluginimiz bu şekildeyken hemen deneyelim;

$('p').hk().css('background-color', 'red');

Şimdi sayfayı yenilersek pluginimiz yapması gerektiği gibi seçilen elementleri (bu durumda tüm paragraflar) griye boyayacak fakat sonradan arkasına eklediğimiz css(‘background-color’, ‘red’) bir iş görmeyecektir. jQuery’nin zincirleme metod yapısını kullanmak için her seferinde this anahtar sözcüğünü pluginden geri döndürmeliyiz. Pluginimiz şu şekli alıyor;

$.fn.plugin_ismi = function(){
    return this.css('color', 'gray');
};

Şimdi pluginimizi yukarıdaki şekilde çağırırsak hem pluginimiz çalışır, seçilen elementler gri olur, hem de sonradan eklediğimiz css(‘background-color’, ‘red’) kodu çalışır ve seçilen elementlerin arkaplanları kırmızı olur. Biz yazacağımız pluginlerde her zaman bu yapıyı kullanmalıyız.

Buraya kadar sorun yoksa şimdi de pluginimize parametre verelim. Mesela seçilen elementleri griye boyuyorduk ya, onu seçmeli yapalım, kullanıcı hangi rengi istiyorsa o renge boyasın.  Eğer hiç bir parametre girmezse de varsayılan olarak belirlediğimiz gri rengine boyasın. varsayılan adında bir dizi oluşturuyoruz, bu dizide adından da anlaşılacağı gibi varsayılan değerleri tutacağız. Daha sonra da jQuery‘nin extend fonksiyonunu kullanarak plugine verilen parametrelerle varsayılan parametrelerimizi birleştiriyoruz. Ve unutmadan şunu da ekleyelim, yazacağımız pluginleri her zaman için (function($){ kodu  ile })(jQuery); kodu arasında yazacağız. Aksi takdirde aynı sayfa üzerinde jQuery dışında javascript kütüphanesi kullananları zor durumda bırakırsınız. Kodumuz bu hale geldi;

(function($){
$.fn.hk = function(ayarlar){
    var varsayilan = {
        'renk': 'gray'
    }

    ayar = $.extend(varsayilan, ayarlar);

    return this.css('color', ayar.renk);
};

})(jQuery);

Artık pluginimizi çağırırken renk değerini şu şekilde verebiliriz.

$('p').hk({'renk':'blue'});

Ve seçilen elementlerimiz artık mavi renkte. renk parametresine istediğiniz herhangi değeri verebilirsiniz.

Buraya kadar temel şeyleri öğrendiğimizi varsayıyorum, tabi her zaman için öğrenilecek bir şeyler vardır, orası ayrı. Ama ben şimdi yazının başında bahsettiğim sağdaki kategori menüsündeki efekti plugine çevirmeye dönmek istiyorum.

Plugin yazmadan şu şekilde kullanabilirim;

$("p").hover(function(){
    $(this).clearQueue().animate({
        letterSpacing: "4px"
    }, "slow");
}, function(){
    $(this).clearQueue().animate({
        letterSpacing: ""
    }, "slow");
});

Fakat ben bu kodu hem daha düzenli olsun, hem de ileride de kullanırım diye plugine çevirmek istiyorum. Ayrıca letterSpacing ve animasyon hızını da parametre olarak verelim, daha anlamlı bir plugin olsun. Hemen kod kısmına geçiyoruz;

(function($){
    $.fn.hk = function(ayarlar){
        var varsayilan = {
            'ls': '4px',
            'hiz': 'slow'
        }

        ayar = $.extend(varsayilan, ayarlar);

        return $(this).each(function(){
            $(this).hover(function(){
                $(this).clearQueue().animate({
                    letterSpacing: ayar.ls
                }, ayar.hiz);
            }, function(){
                $(this).clearQueue().animate({
                    letterSpacing: ""
                }, ayar.hiz);
            });
        });
    };
})(jQuery);

Hepsi bu kadar!

Şimdi hemen pluginimizi test edelim;

$('p').hk({'ls':'24', 'hiz':'fast'});

Bir yerde hata yapmadıysanız çalışması lazım, benim ki çalışıyor :) Uygulamanın çalışan haline şurdan ulaşabilirsiniz, şurdan da bilgisayarınıza indirebilirsiniz.


Paylaş:
  • Facebook
  • FriendFeed
  • Twitter
  • del.icio.us
  • Digg
  • StumbleUpon
  • Technorati
  • LinkedIn
  • MySpace
  • BlinkList
  • Reddit
  • RSS
  • email
  • PDF

Benzer Yazılar (bunları bilgisayar seçiyor);

Categories: JavaScript, Programlama, jQuery 3.406 Gösterim
  1. şimdilik yorum yok.
  1. şimdilik geri bağlantı yok