BT Hayat

  Web sayfanızda File input öğresi yerine bir buton veya link ile dosya diyalog penceresini açmak istediğinizde ilk yaptığımız şey “display:none” diyerek mevcut file input nesnesini gizlemektir. İşte chrome da tam buna gıcık oluyormuş. O nesne görünmez olduğu için jquery ile $(“#file_input_nesnesi”).trigger(“click”) dediğinizde bir tepki vermiyor. Yapılacak iş file input nesnesini başka bir şekilde gizlemek. Mesela “position:absolute; top:-999px; left:-999px” şeklinde stil vererek gizlediğimizde sorun kalmıyor..

Bir mikroproje için lazım olan Jcrop (görselleri kesmeye yaran güzel bir jQuery eklentisi) düzgün çalışmayınca mutlaka başka bir Javascript ile ya da CSS ile çakıştı diye düşündüm. Yanılmamışım, sayfadaki diğer Javascript ve css dosyaları sırayla kaldırdığımda sorunun projede kullandığım Twitter Bootstrap css dosyaları ile çakışmasından kaynaklandığını farkettim. Her ikisi de çok kullanılan kaynaklar olduğu için kesin bu problem başkalarının da karşısına çıkmıştır ve bir çözüm üretmişlerdir diyerek Googling yaptım ve bir iki çözümü denedikten sonra sorunumu şu adresteki düzelme ile hallettim.

Jquery.Jcrop.css dosyanıza şu düzeltiyi yaparsanız, ya da bunu en son yüklenecek şekilde ayrı bir css’e koyarsanız sorun düzeliyor:

/* Fix for using with Bootstrap, from Twitter */

div.jcrop-holder img, img#preview

{

max-width: none;

}

jQuery’yi kim icad ettiyse Allahü Teala hidayet versin diye sık sık dua ediyorum. 10 sene önce patronum “table satırları arasında dolaşırken zemin rengi illa değişsin” diye zorlamasaydı Javascript’e hiç yaklaşmamaya karar vermiştim. Çünkü browserlar arasında (o zamanlar Netscape ve Internet Explorer popülerdi) aşırı bir uyuşmazlık vardı. Birinde çalışan diğerinde çalışmıyordu. Bu sorunlar belki hala var ama jQuery gibi framework’ler sayesinde bu sorunlarla uğraşmak zorunda kalmıyoruz.

Javascript web sitelerini dinamik hale getirmek için elimizdeki neredeyse tek aracımız (Flash’ı saymazsak yani). Bu aracı kullanmak normalde çok zor. Sayfadaki bir elemanı seçmek için document.getElementById(id) gibi uzun ve sıkıcı bir fonksiyonu var mesela. jQuery en basitinden bunu $(“#id”) şeklinde tutmamızı sağlıyor. Buradaki # seçicisi aynı CSS’deki gibi çalışıyor. Örneğin id’si eposta_adresi olan öğeyi tutmak için $(“#eposta_adresi”) dediğimiz gibi tüm paragraf (p) öğelerini tutmak istiyorsak $(“p”) diyebiliyoruz veya “baslik” şeklinde bir class içeren öğeleri tutmak istiyorsak $(“.baslik”) diyebiliyoruz.

jQuery’nin marifetlerinin yanında bu bahsettiğim belki de en basiti. Çok basit komutlarla bir öğeyi (div, paragraf, image, table ne olursa) efektli bir şekilde gizleyip geri gösterebilirsiniz. Şu kadarcık bir kodla: $(“#secilen_oge_id”).toggle(“slow”);

jQuery bir umman, http://docs.jquery.com adresinde çok güzel örneklerle anlatılmış. jQuery’nin sınırı yok, zira hergün yeni bir plug-in yazılıyor. Bu yazının konusu aslında bu plug-in’lerden biri olan form doğrulama (validation) mekanizması idi.

Jquery’nin hemen her fonksiyonu JSON formatında bir konfigürasyon parametresi ile çalışır. Daha önce kullandığımız validation plug-in’i şöyle idi:

	$("#Form").validate({
			  rules: {
				 baslik: {
				      required: true
				    },
				  eposta: {
				      required: true,
                                      email: true,
				    }
			  }
			});

Aslında gayet açık ve anlaşılabilir bir yapısı var. Pek çok projede seve seve kullandık. Fakat aşağıdaki linkteki jQuery plug-in’inde buna bile gerek kalmamış. Sadece ilgili form öğelerinin içerisine class=required ya da class=”required email” gibi class’lar vermek kafi. Bunu aktif hale getirecek Javascript kodu ise yukarıdakine benziyor ama konfigürasyon parametresi içermiyor. Sadece: $(“#Form”).validate();

Güzel değil mi?

Link: http://docs.jquery.com/Plugins/validation#Validate_forms_like_you.27ve_never_been_validating_before.21