mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Kendi Eklentilerimizi Hazırlama
Bu yazımda Jquery ile kendi eklentilerimizi hazırlamayı göstermeye çalışacağım. Eklenti derken; jquery'e ek olarak hazırlayacağımız fonksiyonlar diyebiliriz. Hazırlayacağımız fonksiyonları jquery ile beraber kullanabiliriz. İnternette dolaşırken gördüğüm, başkaları tarafından hazırlanmış jquery eklentileri bu şekilde yapılmış ve bende bundan sonra geliştireceğim jquery eklentilerini bu şekilde yapacağım. Böylece daha fonksiyonel daha kullanışlı bir kodlama yapmış oluyoruz. Jquery ile eklenti hazırlamayı anlatacağım basit bir örnekle daha iyi kavrayabiliriz.

Öncelikle hazırlayacağım eklentinin bir html yapısı var. Bu yapı aşağıdaki gibi olacak. Tabi hazırlayacağımız eklentilerde html yapıyı istediğimiz gibi hazırlayabiliriz. Hatta html kısım hiç olmadan eklenti yapabiliriz. Bu tamamen hazırlayana kalmış bir durum.

  <div id="eklentim">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Görüldüğü gibi yukarıdaki gibi html yapıya sahip yapı için jquery eklentimizin kodlarına bakalım. (jquery_eklentim.js) Eklentimizde örnek olması açısından "eklentim" id'li elementin altındaki her "div" elementine css özellikler atadım. Bu şekilde daha karmaşık işler yaparak daha çeşitli uygulamalar yapabiliriz.

(function($){
 
  // fonksiyonumuzun tanimlanmasi
  $.fn.eklentim = function(){
 
    var elements = this.children("div");
    $(elements)
      .css("border","solid 2px #369")
      .css("margin","0 0 2px 0")
      .css("color","#800")
      .css("padding","0 0 0 10px")
      .css("background-color","#eee");
 
  };
 
})(jQuery);

Eklentimizin kodları da bu şekilde. Bu eklentiyi kullanmak için ise sayfamızda şu şekilde bir kod kullanmalıyız.

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery_eklentim.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#eklentim").eklentim();
  });
</script>

Görüldüğü gibi jquery ile eklenti hazırlamak için yukarıda göstermiş olduğum kod bloğunu kullanmak yeterli. Bundan önce yaptığım uygulamaları ve bundan sonra yapacağım uygulamaları eklenti olarak yapacağım. Bu kullanım şekli bana göre daha kullanışlı ve daha esnek. Verdiğim örnek yapılacak en basit eklenti diyebiliriz. Önümüzdeki dönemde çok daha karmaşık (parametreleri olan vb.) eklentileri hazırlayarak sizlerle paylaşacağım.

Yaptığım uygulamanın eklenti olan ve olmayan hali arasındaki farkı aşağıda görebilirsiniz.

Jquery ile Kendi Eklentilerimizi Hazırlama

Örnek çalışmayı buradan indirebilirsiniz.

Bayram tatili boyunca elimden geldiği kadar jquery ile uygulama geliştirmeye çalıştım ve yaptıklarımı sizlerle paylaştım. Bundan sonra okul nedeniyle fazla ilgilenemeyeceğim ama ilgilenmeye de devam edeceğim.

İyi Çalışmalar!
Mehmet Duran 14 Aralık Pazar 2008 0 19770 2,0
Javascript jQuery Jquery Tanıtım Programlama İnternet Eklenti Plugin
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Yoğunluk, Yaşanan Problemler Javascript ile Menü Effect Asp.net ve Veritabanı Kullanarak Slayt Hazırlama - Örnek Uygulama Jquery ve Ajax ile Kullanıcı Kontrollerini Kullanma - 1 Asp.net ileThumbnail Oluşturma
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Bu Yazı Hakkında Henüz Yorum Yapılmamış.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Gençken bilgi ağacını dikmesek, yaşlandığımız zaman gölgesine sığınacak bir yerimiz olmayacaktır.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009