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

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