JQuery UI Kütüphanesi ile Progress Bar Kullanımı

Ekim 01 16:25 2012 Yazar: A.Gökhan, M.Sc. Bu yazıyı yazdır

Merhaba,

Bildiğiniz gibi Dünya ‘da en fazla kullanılan frameworklerden biri JQuery ‘dir. Javascript ile yazılan JQuery, hemen hemen her ihtiyaca göre kütüphaneye sahiptir. JQuery UI (User Interface Library) de bunların en yaygın olanlarından biridir.

Bu yazıda hepimizin bildiği progress bar yapımı, JQuery UI kütüphanesi ile gerçekleştirilecektir. Tabi bunun için JQUERY resmi web sayfasında jquery ve jquery_ui kütüphane dosyalarını (.js) indirip, progress bar yapacağınız sayfaya include etmeniz gerekmektedir. Buna ilişkin daha detaylı bilgiyi, JQuery resmi web sayfasından temin edebilirsiniz.

Şimdi sayfalarımızı oluşturalım. Bunun için progress bar ‘ın yüklenmesinin gösterileceği html sayfa, işimizi tamamiyle görecektir.

index.html

<div id="progressbar"></div>

1	<div id="progressbar"></div>

Dosyamız açıldığı anda, index.html sayfasında bulunan ve id değeri “progressbar” olan nesnemiz, çalışmaya başlayacaktır. Bunu sağlayan jquery kodları ise:

$(document).ready(function() {
   var count = 0;
   setInterval(function() {
      count = count + 0.5;
      $('#progressbar').progressbar({
         value : count         
      });
   }, 10);
});

$(document).ready(function() {

var count = 0;

setInterval(function() {

count = count + 0.5;

$('#progressbar').progressbar({

value : count

});

}, 10);

});

Gördüğünüz gibi, setInterval fonksiyonu, ki javascript kullananlar bilir: setTimeOut ve SetInterval fonksiyonu hayat zahmetsizce büyük iş yaparlar, count değerini sayıyor, değiştiriyor ve yüklemeyi gerçekleştiriyor. Ben değişme payını 0.5 olarak belirledim. Eğer sizi daha hızlı ya da yavaş yükleme yapmak istiyorsanız, 0.5 değerini değiştirebilir, ya da dinamik olarak kod içerisine gönderebilirsiniz. Mesela, profil resmini değiştirmekte olan bir kullanıcıyı, resim upload işlemi gerçekleştirmekteyken, ekrana progress bar uyarısı gösterip, resim yükleninceye dek progress bar’ın yüklemesini yaptırtabilirsiniz. Dolayısıyla, resim yüklendiği anda progress bar’da %100 değerine ulaşmış olur. Eğitici bir örnek olacağına eminim.

Bizim örneğimizin demosunu görmek için buraya tıklayabilirsiniz.

Not: Bu makale, tarafımdan http://stdioe.blogspot.com/2012/06/how-to-use-jquery-ui-progress-bar.html adresinde İngilizce olarak yayınlanmıştır.