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ü :
UstaDerslik
