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 (24)
DEMOYU GÖRÜNTÜLE (110)
- 24.06.2013 / 15:44:37 0

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

6:38 jQuery Dersleri

jQuery ile Checkbox Hepsini Seç veya Kaldır Yapma

Kategori: jQuery Dersleri | 03.05.2013
5:59 Javascript

Ekran Çıktısını Yazıcıya Yollamak

Kategori: Javascript | 03.05.2013
10:53 Php Dersleri
9:02 Php Dersleri

Değişken Tanımlama ve Ekrana Yazdırma

Kategori: Php Dersleri | 02.05.2013
6:52 Php Dersleri

Php ile HTML Taglarını Temzileme | strip_tags();

Kategori: Php Dersleri | 04.05.2013

Hadi Sende Yorum Yap!

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