Bu yazımızda, jQuery'de tanımlı, nesneye değer atama fonksiyonlarına kısaca göz atıp, konu ile ilgili küçük bir uygulama yapacağız.
Uygulamaya geçmeden önce jQuery içinde tanımlı "Data" fonksiyonlarını kısaca bir hatırlayalım
Data (veri) fonksiyonları:
- .data(): //Herhangi bir nesneye değer atamak ve bu değeri geri çağırmak için kullanılır.
- .removeData(): //Data metoduyla atanılan değişkenleri hafızadan siler.
- .queue(): //Animasyon efektlerini sırasıyla göstermek için kullanılır. Genellikle dequeue ile birlikte kullanılır.
- .dequeue(): //Animasyon efektlerinde sıra gözetmeksizin işlem yapılır. Yani bir nevi animasyondaki sıradan çıkmadır.
- .clearQueue(): //Henüz bitmemiş animasyon efektlerini sıradan çıkarır. Kasetçalardaki pause düğmesine benzetebiliriz. Bsstığınızda kaldığınız yerden devam edersiniz
Syntax:
- .data(anahtar, değer)
- .data(değer)
<script type="text/javascript">
$(document).ready(function(){
//Anahtar kelime değer olarak atanırken
$('#divId').data('site','pinusart');
//Çağrılırken
$('#divId').data('site');
//Nesne veya dizi olarak atanırken
$('#divId').data("adres",{sehir:'Ankara',cadde:'Tunalı Hilmi',tel:'3124578956'});
//Çağrılırken
$('#divId').data("adres").sehir;
});
</script>
HTML5 data attributes kullanımı
HTML5 sisteminde "data" özelliğini kullanarak nesnelerinize değerler ekleyebilirsiniz. Bu değerleri jQuery ".data()" fonksiyonuyla çekip istediğiniz gibi kullanabilirsiniz.
Konu ile ilgili aşağıdaki örnek açıklayıcı olacaktır:
HTML5 data uygulaması
Bu kısma data değerleri gelecek
HTML yapısı:
<div id="html5App" data-site="www.pinusart.com" data-author="Gökhan Sevindi"
data-date="11-03-2013" data-site-params='{"bgColor":"Black","fgColor":"white"}'>HTML5 data uygulaması<br />
<span>Bu kısma data değerleri gelecek</span><br />
<button onclick="degerGetir()">Değer Getir</button></div>
Javascript kodları:
<script type="text/javascript">
function degerGetir(){
var site=$("#html5App").data("site");
var yazar=$("#html5App").data("author");
var tarih=$("#html5App").data("date");
var arkaRenk=$("#html5App").data("siteParams").bgColor;
var onRenk=$("#html5App").data("siteParams").fgColor;
$("#html5App span").html("Değerler:<br /> Site: "+
site+"<br /> Yazar: "+yazar+"<br />Tarih: "+
tarih+"<br /> Arka Plan rengi: "+arkaRenk+
"<br /> Ön renk: "+onRenk);
}
</script>
Uygulama:
Bu uygulamada, kullanıcıdan değerler seçmesini istiyoruz (Değerler seçilirken herhangi bir değişim olmuyor, gönderilen veriler "data" fonksiyonuyla saklanıyor, "uygula" butonuna basılınca yapılan tüm seçimler alana uygulanıyor), daha sonra bu değerlere göre alan içindeki değişiklikleri gerçekleştiriyoruz
|
|
|
|
|
Bu bizim paragrafımız, bütün değişiklikler bu alan içinde gerçekleşecek...
HTML yapısı:
<div id="changeArea">
<table>
<tr>
<td>
<select id="fontFamily" onchange="sendParams(this.options[selectedIndex].value,this.id);">
<option value="" selected="selected">Font seç...</option>
<option value="arial">Arial</option>
<option value="tahoma">Tahoma</option>
<option value="verdana">Verdana</option>
</select>
</td>
<td>
<select id="fontSize" onchange="sendParams(this.options[selectedIndex].value,this.id);">
<option value="" selected="selected">Boyut seç...</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
</select>
</td>
<td>
<select id="bgColor" onchange="sendParams(this.options[selectedIndex].value,this.id);">
<option value="" selected="selected">Arka Plan Renk seç...</option>
<option value="black">Siyah</option>
<option value="blue">Mavi</option>
<option value="yellow">Sarı</option>
<option value="red">Kırmızı</option>
<option value="white">Beyaz</option>
<option value="green">Yeşil</option>
</select>
</td>
<td>
<select id="fgColor" onchange="sendParams(this.options[selectedIndex].value,this.id);">
<option value="" selected="selected">Ön Renk seç...</option>
<option value="black">Siyah</option>
<option value="blue">Mavi</option>
<option value="yellow">Sarı</option>
<option value="red">Kırmızı</option>
<option value="white">Beyaz</option>
<option value="green">Yeşil</option>
</select>
</td>
</tr>
</table>
<p>Bu bizim paragrafımız, bütün değişiklikler bu alan içinde gerçekleşecek...</p>
<button id="butApp" onclick="sendParams('uygula',this.id)">Uygula</button>
</div>
Javascript kodları:
<script type="text/javascript">
$(document).ready(function(){
$("#changeArea").css({
"fontFamily":"verdana",
"fontSize":14,
"background-color":"orange",
"color":"black"
});
});
function sendParams(deger, id){
switch (id){
case "fontFamily":
$("#changeArea").data("fontFamily",deger);
break;
case "fontSize":
$("#changeArea").data("fontSize",deger+"px");
break;
case "bgColor":
$("#changeArea").data("bgColor",deger);
break;
case "fgColor":
$("#changeArea").data("fgColor",deger);
break;
case "butApp":
$("#changeArea").css({
"fontFamily":$("#changeArea").data("fontFamily"),
"fontSize":$("#changeArea").data("fontSize"),
"background-color":$("#changeArea").data("bgColor"),
"color":$("#changeArea").data("fgColor")
});
break;
}
}
</script>
Açıklamalar:
- 3. Sayfa yüklendiğinde alanımız için varsayılan "CSS" değerlerini veriyoruz,
- 10. Her seçim yapıldığında gönderilen "id" bilgisine göre sınıflayıp, ".data" fonksiyonu ile ilgili verileri "(deger)" hafızaya alıyoruz,
- 24. Hafızadaki data bilgilerini "Uygula" butonuna basılınca alana uyguluyoruz.
Kolay gelsin, görüşmek üzere...
