Bu yazımızda, jQuery'de kendi eklentimizi (plugin) yazıp kullanacağız, ilk önce jQuery içinde bir plugin tanımlamak için kullanılan yapılara kısaca bir göz atalım:
Eklenti (Plugin) Oluşturma:
- $.fn.extend : //Sayfamızda DOM nesneleri için eklenti yazmamızı sağlar. Sadece belirtilen nesneye mahsus çalışır.
- $.extend:// İşleyişe yardımcı olacak bir eklenti yazmak için kullanılır. Web sayfamızda nesneler üzerinde değil de işleyişe yardımcı olacak eklentileri yazmamızı sağlar. Bütün fonksiyonların bir arada olduğu topluluk da diyebiliriz.
Uygulama - 1:
Aşağıdaki text alanına yazı yazıp, "İçerik Ekle" butonuyla bu içeriği paragraf olarak alana ekleyebilirsiniz.
HTML yapısı:
<div id="area">
<p>Bu bizim ilk paragrafımız...</p>
</div>
<div>
<input type="text" id="kutu" value="Paragraf içeriğini girin..." size="60"/>
<button id="parEkle">İçerik Ekle</button>
</div>
Javascript kodları:
<script type="text/javascript">
$.fn.addParFunc=function(){
var deger=$("#kutu").val();
$("#area").append('<p>'+deger+'</p>');
}
$("#parEkle").click(function(){
$(this).addParFunc();
});
</script>
Açıklamalar:
- 2. "addParFunc" adlı eklentimizi tanımladık ($.fn.addParFunc)
- 8. Butona tıklayınca "addParFunc" eklentimizi çalıştırdık, "$(this)" kullanarak eklentimizi bu nesne için belirledik ("$.fn.eklenti" yapısında eklentileri DOM nesneleri için oluşturuyoruz.)
Uygulama - 2:
Bu uygulamamızda da "$.fn.extend()" yapısını kullanarak oluşturduğumuz eklentiyi, nesnelere direk olarak uygulayacağız.
Bu bizim ilk paragrafımız...span içindeki bu kısmın arkaplan rengini değiştireceğiz
HTML yapısı:
<div id="area2">
<p>Bu bizim ilk paragrafımız...<span>span içindeki bu kısmın arkaplan rengini değiştireceğiz</span></p>
</div>
<div>
<button id="changeBg">Uygula </button>
</div>
Javascript kodları:
<script type="text/javascript">
$.fn.extend({
renkDegistir:function(renk){
$(this).css({"background-color":renk});
}
});
$("#changeBg").click(function(){
$("#area2 p>span").renkDegistir("orange");
});
</script>
Kolay gelsin, görüşmek üzere...
