jQuery,
hemen hemen bütün browserlar (tarayıcı) üzerinde çalışan bir JavaScript
kütüphanesidir. Bu kütüphane; kod yazma sürecini azaltma, hemen hemen tüm
tarayıcılarla uyumlu olma gibi faydalarının yanı sıra kullanıcılara kendi
plugin’lerini (eklenti) geliştirme olanağı da sağlar.
Yazılan pluginlerin
dosya ismi de genellikle “jquery.plugin_ismi.js”
şeklinde olur. Bu plugini kullanabilmek için web sayfasına (html, asp, aspx,
jsp vb.) ilk önce jQuery kütüphanesi eklenmeli daha sonra da yazılmış olan ve
yukarıdaki gibi isimlendirilerek kaydedilmiş olan plugin’in JavaScript dosyası
eklenmelidir.
jQuery’de
plugin yazılabilmesi için “jQuery.fn” nesnesine bir property eklenmesi gerekmektedir.
Eklenen bu property’nin ismi aynı zamanda pluginin ismi de olacaktır.
Bir jQuery
plugin şablonu aşağıdaki gibidir:
(function ($) {
$.fn.plugin_ismi
= function () {
//Plugin kodları
}
})(jQuery);
Bu jQuery
plugini birden fazla HTML elementine de uygulanabilir. Bunun şablonu da
aşağıdaki gibidir:
(function ($) {
$.fn.highlight = function () {
this.each(function ()
{
//Plugin kodları
});
}
})(jQuery);
Bunu bir
örnek ile anlatmak istersek: Örneğin; üzerine gelince yazının arka plan rengini
ve yazının rengini değiştiren bir plugin tasarlayalım.
Bu plugin
yazılara uygulanacağından, bazı parçalarına uygulanıp bazı parçalarına
uygulanmamak istenebilir. Birden fazla elemente uygulanma ihtimali olduğundan
yukarıdaki ikinci şablona göre pluginimizi yazacağız.
(function ($) {
$.fn.highlight
= function () {
this.each(function ()
{
$(this).hover(function
() {
$(this).attr("style",
"background-color: Yellow; color: Red;");
}, function () {
$(this).removeAttr("style");
});
});
}
})(jQuery);
Bu kod “jquery.highlight.js”
ismiyle kaydedilir. Daha sonra web sayfasında “head” tagları içine jQuery kütüphanesi
ve yazılan plugin eklenir:
<script src="Scripts/jquery-1.8.2.js"
type="text/javascript"></script>
<script src="Scripts/jquery.highlight.js" type="text/javascript"></script>
Bu plugin, “lblTest”
class’ına sahip bütün elementlere aşağıdaki gibi uygulanır:
$(document).ready(function
() {
$(".lblTest").highlight();
});
Sonuç olarak
tüm html kodu aşağıdaki gibidir:
<html>
<head>
<title>test2</title>
<script src="Scripts/jquery-1.8.2.js"
type="text/javascript"></script>
<script src="Scripts/jquery.highlight.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".lblTest").highlight();
});
</script>
</head>
<body>
<label class="lblTest">
Eyüp</label>
<label class="lblTest">
DALAN</label>
</body>
</html>
 |
| Mouse hover'dan önce |
 |
| Mouse hover'dan sonra |
