“Küçük farklar, algıda büyük değişiklere yol açabilir”

jQuery de live() Kullanımı

Tarih: Mart 10th, 2010 | Yazar: | Kategoriler: Javascript, jQuery | Etiketler: , | 5 Yorum »

jQuery daha doğrusu JavaScript ile az çok uğraştıysanız eğer, bir sorunu fark etmişsinizdir. Sayfa ilk yüklendikten sonra eklenen elementleri daha önce eklediğimiz eventler(click, hover…)  tanımaz, tanıması için bu eventleri tekrar çalıştırmamız gerekir. Örnek ile göstermek gerekirse bu durumu.

$(document).ready(function(){
$('p').click(function(){
$('p').parent().append('<p>Tıkla Bana</p>');
});
});

Kodumuz yukarıda nasıl olduğuna bakmak için tıklayın.

Gördüğümüz gibi tıklama ile eklediğimiz paragraflara(p) tıkladığımız zaman hiçbir tepki vermiyor oysa sayfamıza ilk yüklenen paragraf(p) den hiçbir farkı yok. Bu sorunu aşmak için eklediğimiz event’i tekrar çalıştırmamız gerekiyordu daha önceden.
jQuery 1.4.0 da gelen live() methodu ile artık sayfaya yeni eklenen elementleri tanıtmak için eventleri tekrar çalıştırmamız gerek kalmadı. Şimdi yukarıdaki event’i live() methodu kullanarak tekrar yazalım ve daha iyi anlayalım.

$(document).ready(function(){
$('p').live('click', function(){
$('p').parent().append('<p>Tıkla Bana</p>');
});
});

Kodumuz yukarıda nasıl olduğuna bakmak için tıklayın.

Gördüğümüz gibi son eklenen element ile ilk gelen element arasında bir fark yok. Yani ile paragrafa(p) tıklandığında da tıklama sonucu gelen paragrafa(p) da tıklandığında aynı tepkiyi görebiliyoruz. Bunu live methodu ile mümkün kıldık.

Son olarak live methoduna bir bakalım.

.live( eventType, handler )
eventType(Olay tipi): Click, hover, keydown, keyup gibi hangi olaya tepki vermesini belirlediğimiz kısım.
handler(işleyici): Olay gerçekleştiğinde çalışacak işleyici tanımladığımız kısım. Mesela ben örnekte yeni nesne ekledim.


JQuery ile Tarayıcı Motorunu Öğrenelim

Tarih: Şubat 3rd, 2010 | Yazar: | Kategoriler: Javascript, jQuery | Etiketler: , | Yorum Yok »

Maalesef tüm tarayıcı motorları kodları aynı şekilde yorumlamıyor. Css ile uğraşmış olanlar ne demek istediğimi çok iyi anlamıştır :). Bu sorunları halletmek için bazı metotlar mevcut bunlardan biri ise JQuery kullanarak tarayıcı motorunu tespit edip ona göre hareket etmek. JQuery’nin tespit edebildiği 5 adet tarayıcı motoru var. Bunlar;

  • Mozilla
  • Msie
  • Opera
  • Safari
  • Webkit (JQuery 1.4 sürümünde dahil edildi)

Peki nasıl yapıyoruz?

$(document).ready(function(){
var motorAdi;
if($.browser.webkit) {
motorAdi = 'Webkit';
}
else if($.browser.safari) {
motorAdi = 'Safari';
}
else if($.browser.opera) {
motorAdi = 'Opera';
}
else if($.browser.msie) {
motorAdi = 'Msie meşhur internet explorer en çok baş ağrıtan budur:)';
}
else if($.browser.mozilla) {
motorAdi = 'Mozilla';
}
alert('Bu tarayıcı ' + motorAdi + ' moturu kullanıyor!');
});

Tarayıcıda kullanılan motor hangisi ise o motor ismine true değeri yükleniyor bu sayede if yapısında o tarayıcı motorunun hangisi olduğunu kolaylıkla bulabiliyoruz.

Demo


JQuery ile Sürükle Bırak ve Yeniden Boyutlandırma

Tarih: Ocak 31st, 2010 | Yazar: | Kategoriler: jQuery | Etiketler: , , | Yorum Yok »

Bu yazımda JQuery ile herhangi bir elementin ekran üzerindeki yerini değiştirmeyi ve boyutu değiştirmeyi anlatacağım. Bunun için JQuery yanında JQuery UI sınıfını kullancağız bu yüzden aşağıdaki dosyaları sayfamıza dahil etmemiz gerekiyor.

Gerekli Dosyaları Sayfamıza Dahil Edelim

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

ui.css dosyasını olmazsa olmaz değildir isterseniz kendi css dosyanızda kendi stillerinizi kullanarak sürüklenip bırakılacak elementi özelliklerini değiştirebilirsiniz.

Element Tanımlama

Sayfamızdaki hangi elementi sürükle bırak ve boyutlandırma özelliğini kazandırmak istiyoruz öncelikle bunu belirlememiz lazım. Eğer birden fazla elemente aynı özellikleri kazandırmak istiyorsak sınıf kullanmamız daha doğru olacaktır durum tam tersi ise sınıf yerine kimlik(identity) kullanmamız daha doğru olacaktır. Ben #resizeDiv olarak tanımladığım elementi kullanacağım.

<div id="resizeDiv">Sürükle Bırak &amp; Boyutlandır</div>

Elementi tanımladıktan sonra bu elementi sürüklenip bırakılması için bazı stil özellikleri vermemiz gerekiyor. Kısacası position özelliğini absolute yaparak elementin yeri tanımlandığı yerde değilde bizim istediğimiz yerde görebiliriz. Gerekli stil kodu aşağıda.

#resizeDiv {
	width:150px;
	height:150px;
	padding:5px;
	background-color:#ff8811;
	position:absolute;
	top:0px;
	left:0px;
}

Elementi Sürükle Bırak ve Boyutlandırma Özelliği Kazandıralım

Elementin stil özelliklerini kazandırdıktan sonra yapmamız gereken tek şey UI sınıfının bize sunduğu draggable ve resizable nesnelerini kullanmak olacak. Kullanım şekli oldukça basit aşağıda kodlarını görebilirsiniz.

$(document).ready(function() {
	$('#resizeDiv')
	.draggable()
	.resizable();
});

Hepsi bu kadar ancak bunun yetinmek istemiyorsanız bu nesnelerin parametrelerini değiştirmek istiyorsanız aşağıdaki linkleri kullanabilirsiniz. Yada çalışan bir demo görmek istiyorsanız demo linkinden faydalanabilirsiniz.

Demo


http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/resizable/


JQuery ile Foreach Kullanalım

Tarih: Ocak 28th, 2010 | Yazar: | Kategoriler: jQuery | Etiketler: , | Yorum Yok »

Bir dizi değişkenin anahtarı ve değerini en kolay bir şekilde nasıl kullanabileceğimizi bu yazımdan anlatacağım. Fazla sözü uzatmadan anlatıma geçeyim zaten oldukça kolay bir konu.

Veri isimli değişkenimiz

var veri = {
    anahtar1 : 'deger1',
    anahtar2 : 'deger2',
    anahtar3 : 'deger3'
};

Each fonksiyonumuzun kullanımı

$.each(veri, function(anahtar, deger) {
    alert( "Anahtar: '" + anahtar + "' deger: '" + deger + "'" );
});

Gördüğünüz gibi kullanımı oldukça kolay. Veri değişkenimizin değerlerini sırasıyla alıyor ve değişkenimizin anahtarını anahtar değişkenine atıyor değerini de aynı şekilde deger değişkenimize atıyor.

Demo İçin Tıklayın