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

JQuery UI Kütüphanesi ile Progress Bar Kullanımı
Ekim 01 16:25 2012 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

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:

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.

  Yazı şöyle etiketlendi:
  Kategoriler:
A.Gökhan, M.Sc.
A.Gökhan, M.Sc.

My Name is A. Gokhan SATMAN, and I am a software engineer, Author and game developer. gokhansatman.com

Daha fazla yazı görüntüle
Yorum yaz

0 Yorum

Henüz yorum yok

Tartışma başlatabilirsin.

Yorum ekle

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person.
All fields are required.

*