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

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