Jquery Progress Bar Plugin - NProgress
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 Progress Bar Plugin - NProgress

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

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.



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