“Pratik, iyi bir noktaya geldikten sonra yaptığımız bir şey değildir. Sizi iyi bir noktaya getirmesi için yaptığımız bir şeydir.”
by Malcolm Gladwell Outliers S. 36

jQuery ile JavaScript Dosyasını Yükleyelim

Tarih: Mart 29th, 2010 | Yazar: | Kategoriler: Javascript, jQuery | Etiketler: | Yorum Yok »

Bugün kolay ama bazı zamanlar çok kullanışlı olan bir yöntemi sizinle paylaşmaya çalışacağım.

İstemci tabanlı scriptlerimiz de koşullara göre dışarıdan JavaScript dosyası yüklememiz gerekebilir. Yada kod görünümün daha düzenli olmasını istediğiniz zamanlarda html ile değilde JavaScript ile yükleme yapmak isteyebilirsiniz. Bu noktada jQuery bize $.ajax api’si ile işimizi oldukça kolaylaştırıyor. Peki nasıl yapıyoruz aşağıdaki kullanım şekline bakalım.

$.ajax({
	type: 'GET',
	url: 'jsyuklemece.js',
	dataType: 'script'
});

Gördüğünüz gibi kullanımı oldukça kolay. Klasik $.ajax uygulamasını nasıl kullanıyorsak aynı şekilde kullanıyoruz sadece Veri tipini(dataType) ‘script’ olarak belirliyoruz. Hepsi bu kadar.

DEMO


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 Tablomuzdan Satır Silelim

Tarih: Mart 2nd, 2010 | Yazar: | Kategoriler: jQuery | Etiketler: | 1 Yorum »

Bu yazımda sizlere çok kolay bir şekilde jQuery kullanarak tablomuzda ki satırları nasıl sileceğimizi göstereceğim. Ancak satır silme işlemini sadece istemci tarafında çalışacak. Tabi isterseniz ajax ile silme işlemini sunucu tarafına da göndererek tamamlayabilirsiniz.

<table width="100%" border="1" bordercolor="#000000" cellspacing="2" cellpadding="2">
<tr>
<td>Sutun1</td>
<td>Sutun2</td>
<td>Silme İşlemi</td>
</tr>
<tr>
<td>Değer1</td>
<td>Değer2</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
<tr>
<td>Değer3</td>
<td>Değer4</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
<tr>
<td>Değer5</td>
<td>Değer6</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
<tr>
<td>Değer7</td>
<td>Değer8</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
</table>

Yukarıdaki kod da klasik bir tablo oluşturduk. Tek fark içerisine bir adet link yerleştirdik. Bu linke silinicekSatır olarak sınıf tanımladık. Bu sınıfı tanımlama nedenimiz jQuery ile yapacağımız sorgularda bize yardımcı olması.

$(document).ready(function() {
$('.silinicekSatir').click(function (){
if (confirm('Silmek istediğinizden emin misiniz?')){
$(this).parent('td').parent('tr').remove();
}
});
});

Yukarıdaki kodu satır satır değerlendirirsek.

  1. Numaralı satırda: Döküman hazırsa ise fonksyionu çalıştır emri veriyoruz. Yani sayfamızın yüklenmesi bittiğinde fonksiyon çalışacaktır.
  2. Numaralı satırda: .silinicekSatır sınıfına sahip elementlere tıklandığında çalışacak olayı tanımladık.
  3. Numaralı satırda: Kullanıcıya yapmak istediği işlem hakkında emin olup olmadığını soruyoruz. Kullanıcı Tamam butonuna basar ise true değeri dönüyor.
  4. Numaralı satırda: Tıklanan linkin ait olduğu satırı aile metodunu kullanarak buluyoruz ve bu satırı siliyoruz.

Hepsi bu kadar! Demo’ya bakmak isterseniz aşağıdaki link den faydalanabilirsiniz.

DEMO


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/