Bu form elementinin diğer ortamlardaki adını bilmiyorum ama cocoa'daki (macosx işletim sistemini doğal arayüz kütüphanesi) adı segmented control. Bu yüzden, yazının devamında segmented control olarak kullanmaya devam edeceğim.

iOS arayüzlerindeki on/off swtich'lerini biliyorsunuzdur, geçtiğimiz 2 yılda web'deki implementasyonları o kadar artti ki, artık her yerde basit bir javascript kütüphanesi olarak bu form elementini bulmak mümkün. Sadece javascript değil css implementasyonları da var. Bu yazıda, bu elementin teorisine biraz değineceğim. Ayrıca benim kullandığım method, javascriptin çalışmadığı tarayıcılarda da sorunsuz çalışacak (fallback) hatta css desteklemeyen taryıcılarda dahi fonksiyonalitesini bozulmadan koruyacak standart input, label elementleri ile bunu nasıl yapabileceğinizi anlatacağım.

Ama görsel olarak neyden bahsettiğimi göstermem gerekirse:



Gördüğünüz gibi aslında standart bir çoktan seçmeli tek cevap sorularından bahsediyorum. Bunun için standart form elementlerinden radio butonu kullanarak cevapları tek grup altında label ve input elementleriyle bir formda toplayalım.

Devamını Oku →
Html'deki button tagleri form elementler içinde kullanılan bir element. Kapanabilen ve içine span, img gibi elementler koyarak css ile butonları şekillendirmenizi kolaylaştırdığı için tercih edilebiliyor. Fakat eğer type'ını button olarak ayarlamazsanız default değeri olan submit şeklinde hareket edip, tıklandığında formu submit ediyor.
$('form button').each(function(){
	if( !$(this).attr('type') ){
		$(this).attr('type', 'button');
	}
});
ile type'ı belirlenmemiş tüm button elementlerine button type'ını atayabilirsiniz. Sonuç olarak artık butonlar fromlarınızı submit etmeyecektir.

Popüler Etiketler

apple laptop notebook cookie subdomain optimization php pear mdb2 prepare execute injection mssql icon ikon grafik download firefox banner calendar logo ruffles wanda facebook oyun örnek kod twitter bootstrap html css3 jquery rss lifestream dokuman javascript js iOS webkit web app app music google ubuntu ntfs fstab xhtml css job digital social blog media tool portfolio form input textarea select less html5 service sosyal medya istatistik statistics graph ui ux login auth http imza signature mail radio button switch session mfyz mobile table iphone open source browsers db database free api newsletter subscription startups xml export gimp howto parse htaccess url screen konsol terminal nedir editor coding doritos kampanya tytz language macosx ie internet explorer cache apache workspace linux ipad itunes mysql query wireless share pgsql sitemap generator meta insanlar windows link support browser opengraph seo route router mod_rewrite subversion svn kurulum nasıl wordpress cms internet compile compiler on-the-fly ios sql optimizasyon analyse procedure www redirect crossdomain date diff zaman tarih widget object regex design lisans osx player mootools ipucu assets framework kontrol yapıları if connect box search fql development style chart applications plugin network server ajax xmlhttprequest license tebrik ide phpstorm jetbrains deployment version control git kitap developer proje spam while pharma hack integration app store store in-app purchase purchase verification storekit itunes connect code icons