Bu dersimizde jquerynin
NProgress pluginini anlatacağım.Bu plugin youtube deki site üst kısmındaki gibi bir progress bar yapmamızı sağlıyor.Şimdi kodlarımıza başlayalım.
İndir : http://ustaderslik.com/dosya/nprogress.rar
Öncelikle sayfaya jquery ile plugin dosyalarını dahil ediyoruz.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="nprogress.js"></script>
<link rel="stylesheet" href="nprogress.css" />
Dosyaları örneği indirerek alabilirsiniz.
Şimdi plugin kodlarımıza bakalım.
NProgress.start() //Yüklemeyi başlatır.otomatik ilerler
NProgress.done()//yüklemeyi bitirir.
NProgress.set(0.5)//Yüklemeyi elle kontrol etmemizi sağlar.0-1 arası değer alırı.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="nprogress.js"></script>
<link rel="stylesheet" href="nprogress.css" />
<script type="text/javascript">
$(function(){
var yuklenen=0;
$("button").click(function(){
yuklenen=0;
var yenile=setInterval(function(){ yukle(); },300);
})
function yukle(){
if(yuklenen<100){
yuklenen+=10;
}else{
clearInterval(yenile)
}
NProgress.set(yuklenen/100);
}
})
</script>
</head>
<body>
<button>Yükle</button>
</body>
</html>
Görüntüsü :
Butona basarsak sitenin en üstünde yükleme başlıyor ve bitiyor.
Örnekte ne yaptık ona bakalım.Sürekli bir foksiyonu çalıştırarak yuklenen değişkeni 100 oluncaya kadar 10 ar 10ar artırdık.daha sonra o değişkenin içeriğini progress bar ile gösterdik.
Çubuk tasarımı için
nprogress.css den
#nprogress .bar ı bulun değişiklikler yapabilirsiniz.
UstaDerslik
