Jquery Mobil Ders-13 Slider
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-13 Slider

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1994)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/emnxz568zx.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