Tutorial jQuery UI contoh - progress bar (Progressbar) Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Fungsi standar,Label kustom,nilai tak tentu,
Menampilkan proses tertentu atau keadaan ketidakpastian.
Untuk rincian lebih lanjut tentang anggota progressbar, lihat dokumentasi API anggota progress bar (Progressbar Widget) .
default ditentukan progress bar.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery kemajuan UI bar (Progressbar) - Fungsi standar </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Script> $ (Fungsi () { $ ( "#progressbar") .progressbar ({ Nilai: 37 }); }); </ Script> </ Kepala> <Body> <Div id = "progressbar"> </ div> </ Body> </ Html>
label kustom pembaruan.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery kemajuan UI bar (Progressbar) - Tab </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Gaya> Ui-progressbar { position: relative; } .progress-label { position: absolute; kiri: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 # fff; } </ Style> <Script> $ (Fungsi () { var progressbar = $ ( "#progressbar"), progressLabel = $ ( ".progress-label"); progressbar.progressbar ({ Nilai: false, mengubah: function () { progressLabel.text (progressbar.progressbar ( "value") + "%"); }, menyelesaikan: function () { progressLabel.text ( "menyelesaikan"); } }); Fungsi kemajuan () { var val = progressbar.progressbar ( "value") || 0; progressbar.progressbar ( "value", val + 1); jika (val <99) { setTimeout (progress, 100); } } setTimeout (progress, 3000); }); </ Script> </ Kepala> <Body> <Div id = "progressbar"> <div class = "kemajuan-label"> Loading id. </ div> </ div> </ Body> </ Html>
Tak tentu progress bar, dan dapat beralih antara gaya tertentu dan tidak pasti.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery kemajuan UI bar (Progressbar) - nilai tak tentu </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Script> $ (Fungsi () { $ ( "#progressbar") .progressbar ({ Nilai: false }); $ ( "Button") .on ( "klik", function (event) { Target var = $ (event.target), progressbar = $ ( "#progressbar"), progressbarValue = progressbar.find ( "Ui-progressbar-nilai"); jika (target.is ( "#numButton")) { progressbar.progressbar ( "pilihan", { Nilai: Math.floor (Math.random () * 100) }); } Lain jika (target.is ( "#colorButton")) { progressbarValue.css ({ "Background": '#' + Math.floor (Math.random () * 16777215) .ToString (16) }); } Lain jika (target.is ( "#falseButton")) { progressbar.progressbar ( "pilihan", "value", false); } }); }); </ Script> <Gaya> #progressbar Ui-progressbar-nilai { background-color: # ccc; } </ Style> </ Kepala> <Body> <Div id = "progressbar"> </ div> <Tombol id = "numButton"> nilai acak - OK </ button> <Tombol id = "falseButton"> Tentu </ button> <Tombol id = "colorButton"> warna acak </ button> </ Body> </ Html>