Buradasınız: Emre Supçin / Java & Jquery / JQuery Kullanarak Plugin Nasıl Oluşturulur?

JQuery Kullanarak Plugin Nasıl Oluşturulur?

İyi akşamlar sevgili okurlarım,

Bu akşam ki dersimizde sizlere JQuery kullanarak plugin’in nasıl oluşturulduğunu anlatacağım. Öncelikli olarak şunu söylemeliyim ki Web tarayıcılarının çeşitli programlarla hazırlanmış dosyaları görüntüleyebilmesi için gerekli yazılım eklentilerine plug-in denilmektedir. Web tarayıcının herhangi bir programın hazırladığı dosyaları görüntüleme özelliğine sahip olmaması durumlarında dosyanın hazırlandığı programı yazan firmanın sunduğu bu set web tarayıcıya yüklenir ve sorunsuz olarak görüntülenmesi sağlanır.

Tabii web tarayıcıları da her yeni sürümlerinde ihtiyaç duyulan bu plug-in leri sürüme dahil ederek kullanıcıları zahmetten kurtarır. Başkasının Plugin’lerini kullanarak bir parazit terliksisi gibi yaşamak istemiyorsunuzdur heralde. O yüzden size kendi Plugin’inizi nasıl oluşturacağınızı göstereceğim. Kendin pişir kendin ye misalini ele alalım 🙂

<html>
<head>
<link type=”text/css” href=”jquery-ui-1.8.5.custom/css/uidarkness/
jquery-ui-1.8.5.custom.css” rel=”Stylesheet” />
<script type=”text/javascript” src=”jquery-1.4.2.js”>
</script>
<script type=”text/javascript” src=”jquery-ui-1.8.5.custom/js/jquery-ui-
1.8.5.custom.min.js”>
</script>
<script type=”text/javascript”
src=”jquery.dragwithstatuslight.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“img”).css({‘width’:’300px’});
$(“img”).dragwithstatuslight();
});
</script>
</head>
<body>
<img src=”r1.jpg” /><img src=”r2.jpg” />
<img src=”r3.jpg” /><img src=”r4.jpg” />
</body>
</html>

plugin.html

jQuery.fn.dragwithstatuslight = function() {
return this.each(function(){
$(this).css({
border:”5px outset”, cursor:”move”
});
$(this).draggable( {
start: function(event, ui) {
$(this).css({opacity : 0.5});

},
stop: function(event, ui) {
status=””;
$(this).css({opacity : 1});
},
drag:function(event, ui) {
status=”X/Y : ” +
event.pageX + “/” + event.pageY;
}
});
}
);
};

jquery.dragwithstatuslight.js

Plugin can alıcı noktası jquery.dragwithstatuslight.js dosyasındadır. Plugin yazıyorsanız mutlaka bu dosyada kullanacağınız metot jQuery.fn ile başlamalıdır. Ayrıca metodun bulunduğu dosya ayrı bir JavaScript dosyası olmalıdır ki Plugin’i kullanacak kisi Plugin’i kendi koduna bağlayabilsin. Bu JavaScript dosyasıda mutlaka jquery ile başlamalı ve kendine özgü isim ile devam etmelidir. Bizim örneğimizde jquery.dragwithstatuslight.js seklinde olmuştur. Oluşturduğum örnekte draggable() metodunu kullandım. Sürüklemek istediğim nesneye bir çerçeve konmasını istedim. Farenin sürükleme aşamasında, sürükleme şeklini alması gerekiyordu. Yine sürüklenen nesnenin sürüklenme anında renginin açmasını ayarladım. Kendi kodumuzda tum bağlamaları yaptıktan sonra dragwithstatuslight() metodunu diğer metotlar gibi çok kolay kullanabiliriz. Örnekte $(“img”).dragwithstatuslight(); seklinde bir kullanımla yazdığım Plugin’deki metodu kullanmış oldum.