Jquery Mobil Ders-14 Flip Switch
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Mobil Ders-14 Flip Switch

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1887)
RAPOR ET
Jquery mobil derslerimize devam ediyoruz.Bu derste flip switch özelliğini işleyeceğiz.Flip switch 2 şıklı seçimlerde sağa sola kaydırarak bize seçim yaptıran bir özellik.Örnek evet/hayır on/off gibi.Örneği inceleyince daha iyi anlarsınız.

İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-14%20Flip%20Switch.zip

1-Flip switch ekleme


Bir tane select ekleyip data-role="slider" verirsek flip switch olur.İçine 2 tane option koyarak şıkları ekliyoruz.Örnek :
<select data-role="slider">
<option>Evet</option>
<option>Hayır</option>
</select>


2-Renklendirme


Normalde şıklardan biri tema renginde diğeri ise mavi renkte olur.Mavi renkte olanı değiştirmek için css kullanabiliriz.
.ui-btn-active{background:#d12c69 !important;}

Css ile bu şekilde rengi değiştirebiliriz.

3-Diğerleri


Selecte disabled="disabled" vererek kilitleyebiliriz. data-theme="tema_ismi" temasını değiştirebiliriz. data-mini="true" ilede az ufalta biliriz.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
<style type="text/css">
.ana{width:960px;margin:auto;}
.ui-btn-active{background:#d12c69 !important;}
</style>
</head>
<body>

<div class="ana">

<select data-role="slider">
<option>Evet</option>
<option>Hayır</option>
</select>

<select data-role="slider">
<option>Off</option>
<option>On</option>
</select>

<select data-role="slider" disabled="disabled">
<option>Evet</option>
<option>Hayır</option>
</select>

<select data-role="slider" data-theme="b" data-mini="true">
<option>Hayır</option>
<option>Evet</option>
</select>

</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/dwabng7a4.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol