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

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