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

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