Ali @mintik
29 Mayıs 2021 1:26

Switchy.js

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>

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla