Genelde bu tarz örnekler tıklandığında içinde ok işareti beliren checkbox yani onay kutuları dediğimiz html elementler yardımıyla yapılır. Hatta internette slide checkboxes diye arama yaptığınızda benzer bir sürü kayan onay kutucuklarını görebilirsiniz Louis Cuny jQuery için Switchy adında bir eklenti geliştirerek select elementi ile kayan onay kutucukları yapmanızı sağlıyor. Demo sayfasında bir tarafta bay diğer tarafta da bayan ikonu bulunuyor. Hangisine tıklarsanız ortada bulunan küçük daire tıklamış olduğunuz ikona doğru kayacak ve seçmiş olduğunuz cinsiyetin ismi de hemen altta görünecektir. Bir çok web sitesinde üyelik aşamaları sırasında cinsiyet belirtilmesi için hazırlanmış form örnekleri bulunuyor. Siz de web sitenizin üyelik aşamasında bu tarz bir uygulama kullanırsanız tasarım açısından web sitenizin daha güzel görüneceğine inanıyorum.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler
Js ve css dosyaları :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="demos/jquery.animate-color.js"></script>
<script type="text/javascript" src="demos/jquery.event.drag.js"></script>
<script type="text/javascript" src="switchy.js"></script>
<script type="text/javascript" src="demos/application.js"></script>
<link href="switchy.css" rel="stylesheet" />
<link href="demos/bootstrap.min.css" rel="stylesheet" />
<link href="demos/application.css" rel="stylesheet" />
- Body etiketleri arasına eklemeniz gereken bölüm
Html :
<div class="container">
<div class="row">
<div class="span1 offset4 female">
<img src='demos/female.png' class='gender' gender='female' />
</div>
<div class="span2">
<select id='switch-me'>
<option value='female'>female</option>
<option value='' selected="selected"></option>
<option value='male'>male</option>
</select>
</div>
<div class="span1">
<img src='demos/male.png' class='gender' gender='male' />
</div>
</div>
<div class='row'>
<div class='span12' id="console">
</div>
</div>
</div>