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