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 →
Bildiğiniz gibi bazı form elementlerine (radio butonlar, check butonlar ve birkaç diğer element) kozmetik olarak müdahale edemiyoruz veya kısıtlı şekilde müdahale edebiliyoruz. Sonuç olarak bu elementlerin görüntüsü ve çizilmesi tamamen tarayıcı kontrolünde, çoğu işletim sisteminin arabirim elementleriyle uyumlu şekilde görünecek şekilde ayarlanmış. Web arayüzünde standart elementlere dokunmamak genellikle farklı tarayıcı, farklı cihaz ve farklı işletim sistemlerinde sorunsuz çalışmasını sağlaycaktır.

Fakat bazen bir sayfayı sadece bir cihaz için veya belirli bir tarayıcıda görünecek şekilde tasarlarsınız ve bu noktada kullandığınız tüm elementlere istediğiniz tasarımı giydirmek isteyebilirsiniz. Örnegin mobil bir tarayıcıda görüntülenecek bir oyun arayüzü tasarlıyor olabilirsiniz.

Bunun için javascript çözümleri mevcut fakat birkaç css3 özelliği kullanarak sadece css ile çözebilirsiniz. Bu yazıda size radio butonları istediğiniz şekilde şekillendirmeyi anlatacağım. Radio butonları standart kullanımda, yani çoklu secenekten yapılan seçimler için bir örnek üzerinde göstereceğim.



Şimdi bikaç radio butona sahip, standart bir form oluşturalım:
<h3>Which one do you prefer?</h3>
<ul>
    <li>
		<label for="radio1">
			<input type="radio" id="radio1" name="my_options" class="tick_or_x" checked="checked" />
			<span>Strawberry Mojito</span>
		</label>
	</li>
    <li>
		<label for="radio2">
			<input type="radio" id="radio2" name="my_options" class="tick_or_x" />
			<span>Pina Colada</span>
		</label>
	</li>
    <li>
		<label for="radio3">
			<input type="radio" id="radio3" name="my_options" class="tick_or_x" />
			<span>Mint Liquor</span>
		</label>
	</li>
</ul>
Kod oldukça açık, basit bir liste içinde label elementlerinin içinde radio inputlar ve span ile çevrelenmiş açıklama metinleri içeriyor. Gayet standard bir css ile bu görüntüyü yukarıdaki görselde solda olan temiz bir şekle sokalim:
body {
	padding: 10px 30px;
	font: 18px Helvetica;
}

ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
HTML kodunda farkettiğiniz gibi tüm radio elementleri tick_or_x sınıfıyla tanımlanmışlar, şimdi bu sınıfı hazırlayacağız.

Aslında yaptığımız işlem radio elementini gizleyip onun yerine x veya tık işareti koymak. Yerine yerleştirdiğimiz elementi css ile oluşturacağız. Bunun için bir css özelliği olan ":before" pesudo elementi ile html kodunda gördüğünüz span elementlerini kullanacağız. Onun için input elementlerini hemen gizleyebiliriz (veya görünür bir şekilde bırakıp gerçekten görsel değişiklikleri form elementleri üstünde uygulanıp uygulanmadığını görebilirsiniz).

Şimdi list elementlerin içinde sadece span'ler var, bunu da input elementini belirlediğimiz sınıf adını "+" operatörüyle kullanarak seçtirebiliriz, yani ".tick_or_x + span" css seçicisi tick_or_x sınıflı elementin hemen ardından gelen span'leri seçmemizi sağlayacaktır.

Aşağıda tick_or_x sınıfına ait kodu veriyorum, hemen ardından açıklamaya çalışacağım:
.tick_or_x {
	display: none;
}

.tick_or_x + span {
	display: inline-block;
	position: relative;
	padding-left: 40px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
	margin-bottom: 15px;
}

.tick_or_x + span:before {
	content: '✗';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: silver;
	width: 30px;
	margin-right: 10px;
	text-align: center;
	border-radius: 15px;
}

.tick_or_x:checked + span:before {
	content: '✔';
	background: green;
	color: white;
}
".tick_or_x + span" seçicisiyle seçtiğimiz elementleri block level elementlere çevirelim, sonrasında ".tick_or_x + span:before" seçicisiyle span elementimizin önüne bir element oluşturacağız. Bu kısım biraz kafa karıştırıcı gelebilir, css before ve after pesudo elementleri hakkında daha önce yazdığım "CSS before ve after sözde elementleri" yazısını inceleyebilirsiniz.

".tick_or_x + span:before" ile seçtiğimiz sözde elementi bir block level elemente çeviriyoruz ve position absolute ile havada asılı hale getirelim (floating element). Bu elementin ailesi (parent) olan ".tick_or_x + span" elementi daha önce block level ve relative duruma getirilip bulunduğu noktada asılı hale getirilmişti. Şimdi before sözde elementini istediğimiz noktaya pozisyonlayabiliriz. Bu sözde element ile görsel olarak, tick veya x işaretini oluşturacağız. Bir radio butonun doğal durumunun seçili olmadığı (unchecked) durumu olduğunu düşünürsek bu sözde elementin doğal görünümü "X" işaretçisi olacaktır. Bunu bir imajla da tasarlayıp tamamen özelleştirebilirsiniz. Ben basit bir örnekleme ile ascii karakterlerini doğrudan css içine yazdım, aslında bunu yapmamak gerek, çünkü IE gibi tarayıcılarda bu karakterler çalışmayacaktır.

Elementimizi radio butonlarımızın bulunduğu konuma gelecek şekilde (örnekte solda etiketin yanında) pozisyonladıktan sonra seçim durumunu yakalamaya çalışacağız. Burada bir css3 seçicisi olan ":checked" seçicisini kullanacağız. Bu seçici sadece seçilmiş checkbox, radio gibi elementleri işaret eder. Seçili olan radio butonumuzu bu şekilde yakalayabiliriz. Görsel olarak ilgili elementleri yakalamak için bu seçici ile "+" operatörünü beraber kullanıyoruz ve ".tick_or_x:checked + span" seçicisi bize seçili olan radio butona ait etiket span'ini yakalamamızı sağlıyor. Bu elemente ait before sözde elementi de seçili olan elementin görsel olarak yerleştirdiğimiz işaretçisini adresleyecektir.

Doğal olarak seçimi ifade eden check ascii işareti ve bir artalan rengi farklılığı ile görsel olarak seçimi gösterebiliyorum. Bunun yerine bir imaj tasarlayarak istediğiniz şekilde özelleştirebilirsiniz.

Ben başta gizlediğimiz radio input elementini bu noktaya kadar görünür halde tutup, hazırladığım kodun, yaptığım tıklamaları doğru yakalayıp yakalamadığını form elementi üstünde görecek şekilde geliştiriyorum. Bu noktada input'lari css'den gizliyoruz ve kodumuz hazır duruma geliyor. Şimdi aşağıdaki butonla çalışan örneğin inceleyin.


Çalışan Örnek Kod


Nihai kodu da çalışan demo'dan inceleyebilirsiniz.

Popüler Etiketler

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