jQuery .data() Kullanımı
Merhaba Arkadaşlar,
Bu makalede hayatımıza Html5 ile birlikte giren data nesnesinden bahsedeceğim. “.data()” nesnesi, html etiketleri içerisinde bir özellik olarak kullanılıp nesneleri jQuery ile seçerken, sıralarken, görüntülerken anlaşılır bir alan içerisinde tutmamızı sağlıyor. Daha önceden genellikle class ile yaptığımız seçim işlemlerinde class değeri global olduğu için farklı alanlarda da kullanımının yapıldığı zamanlarda özellikle javascript kontrollerinde karışıklığa yol açabiliyordu. Ayrıca yapı olarak class içerisine ekleyeceğimiz değerlerin stil verme ile ilgili olması gerektiği için mantıksal açıdan da hatalı bir durum ortaya çıkıyordu.
“.data()” ile birlikte örneğin spor malzemelerinin listelendiği bir sayfada tipi “krampon” olanları seçmek için liste içerisinde ki tüm elemanları gezip data nesnesinden kontrol yapabiliriz. Liste yapımızı şu şekilde oluşturalım:
<ul> <li data-listtype="krampon">Krampon Resmi</li> <li data-listtype="forma">Forma Resmi</li> <li data-listtype="forma">Forma Resmi</li> <li data-listtype="sort">Şort Resmi</li> <li data-listtype="bileklik">Bileklik Resmi</li> <li data-listtype="krampon">Krampon Resmi</li> </ul>
Bu yapıda oluşturulmuş bir listede class’ı “button” olan bir linke tıklandığında sayfada sadece kramponların görüntülenmesini istersek jQuery ile şu şekilde bir “each” fonksiyonu oluşturmalıyız:
$(document).ready(function(){
$(".button").click(function(event){
event.preventDefault();
$("ul li").each(function(){
if ($(this).data("listtype") == "krampon") {
$(this).show();
}else{
$(this).hide();
}
});
});
});
Yaptığımız sorguda tüm liste elemanlarını gezerek data nesnesi içerisinde tanımladığımız “listtype” değerlerini kontrol ettik. Değeri krampona eşit olanlar görünür olup değeri krampon olmayanlar gizlendi.
Şimdi web sitelerinde sıklıkla gördüğümüz bir uygulama yapalım. Örneğin bir yazılım firmasının kurumsal web sitesine girdik ve referanslar sayfasını açtık. Burada firmanın yaptığı tüm işlerin bir listesi bulunuyor. Web siteninde geliştirme yaptıkları her firmanın logosunu veya sitesinden alınmış bir ekran görüntüsünü bu uzun liste içerisinde görüyoruz. Listenin başında “Hepsi, WordPress, Joomla, Drupal ” seçeneklerinin olduğu bir alan olsun ve buradan yapacağımız seçime göre alttaki liste düzenlensin.
index.html isimli bir sayfa oluşturuyoruz ve ilk kod yapısını şu şekilde düzenliyoruz:
<!DOCTYPE html>
<html>
<head>
<title>Bilgisayaci.Org - jQuery .data() Kullanımı</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
</body>
</html>
Daha sonra birbirinden bağımsız olarak seçim ve işlerin sıralanacağı listeyi oluşturuyoruz. Css ile düzenleme işlemlerinin ardından index.html sayfamızın son hali şu şekilde olacaktır:
<!DOCTYPE html>
<html>
<head>
<title>Bilgisayaci.Org - jQuery .data() Kullanımı</title>
<style>
ul{list-style-type: none; margin: 0 auto 50px; padding: 0; display: inline-block; width: 100%;}
ul li{float: left; padding: 0 15px;}
.selectors a{color: #000000; text-decoration: none; margin: 0 auto}
.works-list img{max-width: 100px; max-height: 100px;}
.container{width: 960px; margin: 0 auto;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<div class="container">
<ul class="selectors">
<li><a href="javascript:;" data-selectortype="all">Hepsi</a></li>
<li><a href="javascript:;" data-selectortype="wordpress">Wordpress</a></li>
<li><a href="javascript:;" data-selectortype="joomla">Joomla</a></li>
<li><a href="javascript:;" data-selectortype="drupal">Drupal</a></li>
</ul>
<ul class="works-list">
<li data-workstype="wordpress"><img src="https://s.w.org/style/images/wp-header-logo.png?1" /></li>
<li data-workstype="joomla"><img src="https://cdn.joomla.org/images/site_header.png" /></li>
<li data-workstype="drupal"><img src="https://www.drupal.org/files/druplicon.small_.png" /></li>
<li data-workstype="wordpress"><img src="https://s.w.org/style/images/wp-header-logo.png?1" /></li>
<li data-workstype="joomla"><img src="https://cdn.joomla.org/images/site_header.png" /></li>
<li data-workstype="drupal"><img src="https://www.drupal.org/files/druplicon.small_.png" /></li>
<li data-workstype="wordpress"><img src="https://s.w.org/style/images/wp-header-logo.png?1" /></li>
<li data-workstype="joomla"><img src="https://cdn.joomla.org/images/site_header.png" /></li>
<li data-workstype="drupal"><img src="https://www.drupal.org/files/druplicon.small_.png" /></li>
<li data-workstype="wordpress"><img src="https://s.w.org/style/images/wp-header-logo.png?1" /></li>
<li data-workstype="joomla"><img src="https://cdn.joomla.org/images/site_header.png" /></li>
<li data-workstype="drupal"><img src="https://www.drupal.org/files/druplicon.small_.png" /></li>
<li data-workstype="wordpress"><img src="https://s.w.org/style/images/wp-header-logo.png?1" /></li>
<li data-workstype="joomla"><img src="https://cdn.joomla.org/images/site_header.png" /></li>
<li data-workstype="drupal"><img src="https://www.drupal.org/files/druplicon.small_.png" /></li>
</ul>
</div>
</body>
</html>
Sayfa yapımızı hazırladığımıza göre geriye sadece jQuery ile yapacağımız işlemler kalıyor.
$(document).ready(function(){
var selector,worksType;
$(".selectors a").click(function(event){
event.preventDefault();
selector = $(this).data("selectortype");
if (selector == "all") {
$(".works-list li").show();
}else{
$(".works-list li").each(function(){
worksType = $(this).data("workstype");
if (selector == worksType) {
$(this).show();
}else{
$(this).hide();
}
});
}
});
});
Kodları bir kaç madde ile açıklamak gerekirse;
– Her tıklamada kullanabileceğimiz iki adet değişken oluşturuldu.
– Üstteki listeden(Hepsi,Wordpress,Joomla,Drupal) herhangi bir elemana tıklandığında kontrol başlıyor.
– Üstte tanımlanan değişkenlerden birisinin içerisine tıklanan linkin data nesnesi gönderiliyor.
– Bir if sorgusu ile tıklanan linkin data nesnesinde hepsini gösterecek değerin var olup olmadığı kontrol ediliyor. Eğer “all” yazılı ise listedeki tüm elemanlar kullanıcıya gösteriliyor.
– eğer “all” yazılı değil ise işlerin sıralandığı listede ki tüm elemanları geziyoruz. Her elemana gelindiğinde ilk olarak en üstte tanımladığımız ikinci değişkene seçili liste elemanının data nesnesini gönderiyoruz. Ardından iki değişkeni karşılaştırıp eşitlik sağlanırsa seçili elemanı gösteriyor, eşitlik sağlanamazsa gizliyoruz.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 60 No ‘lu Maddeden İndirebilirsiniz..
Makale genel olarak faydalı olmakla birlikte data() metodunun asıl inceliklerinden bahsedilmemiş. Şuradaki yorumların okunması da çok faydalı olacaktır:
http://boardest.com/thread/jquery-de-data-metodu-hangi-durumlarda-kullaniyoruz