Harun Saraç

Jquery Form Eklentileri

Bu aralar kod yazarken işime yarayan, kullandığım ya da kullanmak üzere arşivime aldığım Jquery eklentilerini paylaşmak istedim.

.clearField

Facebook’ta yorum yazarken gördüğümüz uygulama, metin kutusunda ipucu verilmesi ve tıklayınca bu ipucunun kaybolması. Arama kutularında, özel alan girişlerinde uyarı belirtilmesinde kullanılabilir.

Facebook Yorum Kutusu

Jquery Kodu:

	$(document).ready(function() {
		$('clearfield').clearfield();
	});

Html Kodu:

<input class="clearfield" type="text" value="Lütfen e-posta adresinizi giriniz" />

Url: http://plugins.jquery.com/project/clearField

.jGrow

Özellikle uzun mesajlar yazarken metin alanının yazı uzadıkça uzamasını sağlıyor. Yine kullanılabilirlik canavarı Facebook’ta görmüştüm ben bunu ilk kez, mesaj yazma alanında.

Jquery Kodu:

	$(document).ready(function() {
		$("textarea#deneme").jGrow();
	});

Html Kodu:

<textarea id="deneme" cols="40" rows="4" name="deneme"></textarea>

Url: http://plugins.jquery.com/project/jGrow

.autoTab

Kredi kartı, doğum tarihi gibi alanlarda işe yarayacak güzel bir eklenti. Yalnızca imlecin otomatik olarak bir sonraki alana geçmesini sağlamıyor, aynı zamanda sadece harf/rakam girilmesi ve büyük harfe dönüştürme gibi işlevleri de yerine getiriyor.

autotab

Jquery Kodu:

$(document).ready(function() {
$('#area_code').autotab({ target: 'number1', format: 'numeric' });
$('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code' });
$('#number2').autotab({ previous: 'number1', format: 'numeric' });
});
	});

Html Kodu:

<form>
<div><strong>Phone Number:</strong></div>
<input id="area_code" maxlength="3" name="area_code" size="3" type="text" /> -
<input id="number1" maxlength="3" name="number1" size="3" type="text" /> -
<input id="number2" maxlength="4" name="number2" size="5" type="text" />

Url: http://www.lousyllama.com/sandbox/jquery-autotab

4 Comments to “Jquery Form Eklentileri”

Ali Osman Gülsoy 3 Kasım 2009 at 17:14 #

teşekkürler Harun abi yalnız üçüncü eklentinin (autoTab) linkini ben göremedim birde jquery ile drag drop olayları ile ilgili bir yazını merakla bekliyorum bir nesneyi başka nesnenin üzerine getirince/üzerin bırakınca bu tarz olaylar ile ilgili pek kaynak bulamadım(türkçe) ingilizcemde yok ne yazıkki
Harun Saraç 3 Kasım 2009 at 17:49 #

Düzelttim, url’yi görebilirsin.
Şu aralar drag&drop’lar üzerinde çalışıyorum, bir sitede de kullandım. Sanırım haftaya yayınlarım çalışmaları.
Yusuf KAYAOĞLU 4 Kasım 2009 at 13:41 #

Ellerine sağlık Harun…
Harun Saraç 4 Kasım 2009 at 13:49 #

@Yusuf KAYAOĞLU
Teşekkür ederiim.