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

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