Jquery Scroll Değiştirme Plugini - Scrollator
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 Scroll Değiştirme Plugini - Scrollator

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2110)
RAPOR ET
Yaptığımız tasarımlar da bazen scrollbarın tasarımının sitemize uyumlu olmasını isteriz.Bu dersimizde de scroll tasarımını değiştiren scrollator adlı plugini işleyeceğiz.Şimdi kullanımına geçelim.

İndir : http://ustaderslik.com/dosya/scrollator.zip

İncele : http://ustaderslik.com/ornek/scrollator

$(seçici).scrollator();

Pluginin css ve js dosyasını dahil ettikten sonra,bu şekil de pluginimizi uyguluyoruz.Dosyalar örnek mevcut.

Standart bir tasarım ile scrollbar değişecektir.Tasarımı değiştirmek için fm.scrollator.jquery.css dosyasına girerek,buradan renkleri,hover efektini,genişlikleri vs her türlü değiştirebilirsiniz,css bilginiz ile.

Pluginin bazı methotları bulunmakta.Şimdi bunları inceleyelim.
$(seçici).scrollator("destroy");//scrollbarın tasarımını kaldırarak standarta dönüştürür.
$(seçici).scrollator("hide");//scrollbarı gizler
$(seçici).scrollator("show");//scrollbarı gösterir


Bu şekilde jquery ile kontrol etmemiz için methodlar bulunmakta.Standart plugin de scrollbar 1.5 saniye de otomatik gizlenir.Bunu değiştirmek için fm.scrollator.jquery.js dosyasına girerek 1500 yazan yeri bulun.Buradan süreyi uzatarak sürekli durmasını sağlayabilirsiniz.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link rel="stylesheet" href="fm.scrollator.jquery.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="fm.scrollator.jquery.js"></script>
<script type="text/javascript">
$(function(){
$("body").scrollator();
$("#alan2").scrollator();

$("#normal").click(function(){
$("body").scrollator("destroy");
})
$("#plugin").click(function(){
$("body").scrollator();
})
})
</script>
<style type="text/css">
#alan{width:900px;height:2400px;background:#f5f5f5;margin:auto;}
#alan2{width:600px;height:300px;background:#f1f1f1;margin:auto;}
</style>
</head>
<body>

<button id="normal">Normal</button>
<button id="plugin">Pluginli</button>

<div id="alan">
<div id="alan2">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/55dsxc11g.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