Latest web development tutorials

jQuery UI API - anggota progress bar (Progressbar Widget)

kategori

Widget (widget)

pemakaian

Keterangan: Menampilkan keadaan proses yang pasti atau tidak terbatas.

Versi baru: 1.6

Sebuah progress bar dirancang untuk menunjukkan persentase penyelesaian dari kemajuan saat ini. Sebuah progress bar dengan CSS coding fleksibilitas untuk menyesuaikan ukuran, default akan ditingkatkan untuk mengakomodasi ukuran wadah induk.

Menentukan progress bar hanya dapat digunakan dalam sistem dapat memperbarui status kasus tersebut secara akurat. Menentukan sebuah progress bar tidak akan mengisi dari kiri ke kanan, kemudian loop kembali kosong - jika Anda tidak dapat menghitung keadaan yang sebenarnya, menggunakan progress bar tdk untuk memberikan umpan balik pengguna.

theming

Seorang anggota progress bar (Progressbar Widget) menggunakan framework jQuery UI CSS untuk menentukan tampilan dan nuansa dari gaya. Jika Anda perlu menggunakan ditentukan kemajuan gaya bar, Anda dapat menggunakan berikut nama kelas CSS:

  • ui-progressbar : kemajuan wadah luar. Unsur ketidakpastian akan menambah kemajuan tambahan bar ui-progressbar-indeterminate , kelas.
    • ui-progressbar-value : Elemen ini merupakan kemajuan dari bagian mengisi.
      • ui-progressbar-overlay : overlay untuk menampilkan animasi tak tentu progress bar.

mengandalkan

informasi tambahan

  • bagian membutuhkan beberapa CSS fungsional, jika tidak maka tidak akan bekerja. Jika Anda membuat tema kustom, menggunakan widget yang ditentukan file CSS sebagai titik awal.

contoh

Sebuah sederhana jQuery UI kemajuan tak tentu bar (tak tentu Progressbar). 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> anggota progress bar (Progressbar Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Kepala>
<Body>
 
<Div id = "progressbar"> </ div>
 
<Script>
$ ( "#progressbar") .progressbar ({
  Nilai: false
});
</ Script>
 
</ Body>
</ Html>