Jquery mobil serimize devam ediyoruz.Bu derste
sliderı işleyeceğiz.Slider ses açıp kapatmak için olan çubuk gibi olan.Resim geçişleri için olan değil.Şimdi kodlarımıza geçelim.
İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-13%20Slider.zip
1-Slider ekleme
Slider eklemek için bir input koyup tipini
range yapıyoruz.Bu şekilde sliderimiz direk geliyor.Örnek :
<input type="range" min="0" max="100" value="50" step="5">
Gördüğünüz gibi bir kaç parametremiz var.Bunlar :
min :Sliderin minimum değeri
max :Sliderin maxsimum değeri
value :Sliderin ilk değeri
step :Sliderin adım başı kaç ilerleyeceği
2-Renklendirme
Sliderin solunda kalan kısmı renklendirebiliriz.Bunun için slidere
data-highlight="true" vermemiz yeterli.Standart olarak mavi şekilde gelecektir.Bunu değiştirebiliriz.
.ui-btn-active{background:#666 !important;}
Css ile o classa erişip bu şekilde değiştiriyoruz.Örnek :
<input type="range" min="0" max="100" value="25" step="1" data-highlight="true">
3-Kilitleme
Slidere
disabled="disabled" vererek sağa sola kaydırmasını engelleyebiliriz.Örnek :
<input type="range" min="0" max="100" value="60" disabled="disabled">
4-Tooltip
Sliderin değerini 2 farklı tooltip şeklinde gösterebiliyoruz.Birincisi slider kaydırma çubuğu üzerinde.Bunun için slidere
data-show-value="true" vermemiz gerekir.İkincisi ise kaydırma çubuğunun üzerinde gösterebiliriz.Bunun için slidere
data-popup-enabled="true" vermemiz yeterli.İkisini birliktede kullanabiliriz.Örnek :
<input type="range" min="0" max="10" step="0.1" value="2.4" data-highlight="true" data-show-value="true" data-popup-enabled="true">
5-Diğerleri
data-theme="tema_ismi" ile temasını değiştirebiliriz yada
data-mini="true" ile slideri ufaltabiliriz.
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:#666 !important;}
</style>
</head>
<body>
<div class="ana">
<input type="range" min="0" max="100" value="50" step="5">
<input type="range" min="0" max="100" value="25" step="1" data-highlight="true">
<input type="range" min="0" max="100" value="75" step="1" data-highlight="true" data-theme="b" data-mini="true">
<input type="range" min="0" max="100" value="60" disabled="disabled">
<input type="range" min="0" max="10" step="0.1" value="2.4" data-highlight="true" data-show-value="true" data-popup-enabled="true">
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
