switchy
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>

Etiketler:
Ali senin düşüncelerini merak ediyor. Bir yorum yaz