jQuery ile Eklenti Nasıl Yapılır? | İlk jQuery Eklentisini Yazıyoruz!

jQuery ile eklenti yazma derslerine de bu sayede başlamış oluyoruz. İlk dersimiz ve ilk kez eklenti yazacağımız dan dolayı bu eklenti biraz basit olacak. Önce mantığı ve işleyişi anlamak sonrasında ise mükemmelliğe dökmek gerekir. Dersin videolu olarak hazırlanması taraftarıydım ama bu dersin daha fazla beklemesini istemedim. Bundan dolayı işlemleri tek tek yazarak daha açıklayıcı biçimde göstermeye çalışacağım.

Şimdi ilk olarak nasıl bir yapı yapacağımızı anlatayım. Sonra bu işlemi eklenti olarak yapalım. Şimdi bir div içinde spanlar yer alacak. Bu spanların css ile düzenlenmesini istiyorum. Tabi bunu eklenti olarak yacağız. İlk önce html kodlarımızı oluşturalım.

<div id="ilk">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

Yukarıdaki gibi bir html yapımız var. Tabi siz kendinize göre bu yapıyı değiştirebilirsiniz. Yukarıdaki yapımızda hazır olduğuna göre şimdi gelin jQuery kodlamamızın nasıl olacağını görelim. Bu kodlar eklenti olacağından dolayı yeni bir dosya oluşturalım. Buna da ilkeklentim.js adını verelim.

(function($){

// Kodlar burada olacak

})(jQuery);

Yukarıdaki gibi bir şema oluşturuyoruz. Bu alan eklenti yazıldığını gösteren bir yerdir. Bunun içini doldurarak eklentimizi şekillendirmeye başlayacağız. Şimdi sırada eklentimize isim bulmak kalıyor. Ben buna "ilkeklentim" adını vereceğim. Bunuda şu şekilde yapıyoruz.

(function($){

$.fn.ilkeklentim = function(){

// Eklenti kodları burada olacak.

};

})(jQuery);

Göründüğü gibi eklentimiz yavaş yavaş şekillenmekte. Şimdi eklentimizin kodlamasının nasıl yapılacağını görelim.

(function($){

$.fn.ilkeklentim = function(){
var elements = this.children("span"); // Şekillendirmek istediğim alanı seçtim.

};

})(jQuery);

Yukarıda müdahale edeceğim alanı seçerek bununla ilgili düzenlemelerimi yapabileceğim bir değişken oluşturuyorum ve şu şekilde kodlamalarıma devam ediyorum.

(function($){

$.fn.ilkeklentim = function(){
var elements = this.children("span"); // Şekillendirmek istediğim alanı seçtim.
.css("border","solid 1px #666")
.css("margin-bottom","2px")
.css("color","#000")
.css("padding","2px 5px")
.css("background-color","#eee")
.css("display","block")
.css("font-famiy","Arial")
.css("font-size","14px");
};

})(jQuery);

Taaaa taaaaa. Yukarıdaki gibi eklentimi hazırlamış ve sonlandırmış oluyorum artık. Peki biz ne yaptık? Eklentim ile gelen değirin içinde yer alan spanları seçtik ve onlara bir kaç css kodu ile şekillendirmeye tabi tuttuk.

Şimdi bu eklentiyi nasıl kullanacağımızı görelim. Şimdi HTML temel yapısını oluştururken biz div'imize id olarak ilk değerini vermiştik. Şimdi ilk değerini seçerek işlemi buna uygulaması gerektiğini belirtelim.

$("#ilk").ilkeklentim();

Yukarıdaki gibi olacaktır. Son olarak eklentiyi toplamak gerekirse HTML ve JS dosyamızı şu şekilde son haliyle yazalım.

HTML dosyamız şu şekilde olacaktır.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="ilkeklentim.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ilk").ilkeklentim();
});
</script>

<div id="ilk">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

Şimdide jQuery dosyamızı derleyip toplayalım oda şöyle olacak. Adı ilkeklentim.js

(function($){

$.fn.ilkeklentim = function(){
var elements = this.children("span"); // Şekillendirmek istediğim alanı seçtim.
.css("border","solid 1px #666")
.css("margin-bottom","2px")
.css("color","#000")
.css("padding","2px 5px")
.css("background-color","#eee")
.css("display","block")
.css("font-famiy","Arial")
.css("font-size","14px");
};

})(jQuery);

Böylece ilk eklentiyi yazmış olduk. Dilerseniz dosyaları direk indirebilir dilerseniz de kendiniz yazarak çalışmanızı yapabilirsiniz. Demoyuda görüntüleyerek nasıl bir şekil verdiğini görebilirsiniz.

İlk dersimiz olduğu için CSS ile şekillendirmeyi anlatmayı tercih ettim. Basit şekilde eklenti böyle yazılmaktadır.
EK DOSYALARI İNDİR (27)
DEMOYU GÖRÜNTÜLE (114)
- 24.06.2013 / 15:44:37 0

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

4:32 jQuery Dersleri

İnternet Explorer 6 PNG Sorununu Çözmek

Kategori: jQuery Dersleri | 03.05.2013
13:07 cURL Dersleri

cURL ile Post İşlemi Yapmak

Kategori: cURL Dersleri | 03.05.2013
5:01 Css Dersleri
6:54 Php Dersleri

Php ile Dosya Silme İşlemi | Unlink

Kategori: Php Dersleri | 03.05.2013
Html Dersleri

Google Translate İle Sitenizde Çoklu Dil Desteği Verin

Kategori: Html Dersleri | 23.06.2013

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.