默認(rèn)使用效果
<div id="progressbar"></div>
在 HTML 代碼中我們只是簡單的定義了一個div，和之前介紹的方法一樣，我們也是簡單的調(diào)用一個 progressbar() 方法即可 顯示出圖片中的效果。
<script>
$(document).ready(function () {
$("#progressbar").progressbar({
value: 50
});
})
</script>
這里，我們將進(jìn)度條的值設(shè)置成了50，當(dāng)然這個值可以隨意指定。現(xiàn)在我們看到的還是一個靜態(tài)的效果，顯然是不能滿足我們的，一個靜態(tài)的進(jìn)度條對我們而言毫無意義，下面就來看看動態(tài)的效果該如何實現(xiàn)。
動態(tài)加載
可見，這個效果還是很有利用價值的，下面我們就看看是怎么做到的。
<div id="progressbar">
<div id="progressbar-label"></div>
</div>
在這里，我們又嵌套了一個 div 標(biāo)簽，用于擺放加載時進(jìn)度的變化。下面我們需要書寫 CSS 樣式，將 progressbar-label 中的值放到進(jìn)度條當(dāng)中去。
<style>
#progressbar {
width: 320px;
position: relative;
}
#progressbar-label {
position: absolute;
top: 6px;
left: 48%;
}
</style>
我們將 left 屬性設(shè)置成了 48%，并沒有設(shè)置成居中，因為我們還有一個文字寬度，如果設(shè)置成 50%，就顯得靠右了。其實，我也不知道怎么可以將這個文字設(shè)置成居中，我嘗試了好幾個屬性，但是都失敗了。如果有人知道，請在下方留言教教我，萬分感謝。
<script>
$(document).ready(function () {
var progressbar = $("#progressbar");
var progressbarLabel = $("#progressbar-label");
progressbar.progressbar({
value: false,
change: function () {
progressbarLabel.text(progressbar.progressbar("value") + "%");
},
complete: function () {
progressbarLabel.text("100%");
}
})
function progress() {
var value = progressbar.progressbar("value") || 0;
progressbar.progressbar("value", value + 2);
if (value < 99) {
setTimeout(progress, 100);
}
}
setTimeout(progress, 1000);
})
</script>
1.將 progressbar 的 value 設(shè)置成 false，這么設(shè)置有什么效果呢？看上面的圖片，在剛開始的時候一個動態(tài)的波浪效果，這么設(shè)置就是讓這個效果出現(xiàn)。
2.在 progress() 方法中我們使用了一個遞歸調(diào)用，也就是每隔 0.1s 調(diào)用一下自身方法，進(jìn)行更新 progressbar 的值。在方法的外面，我們將延遲時間設(shè)置成了 1s ， 主要是為了將剛開始加載的動態(tài)效果顯示的更明顯一些。
彈出框下載效果
<div id="dialog" title="下載">
<div id="progressbar-label">正在加載</div>
<div id="progressbar"></div>
</div>
<button type="button" id="openBtn">打開</button>
關(guān)于 html 代碼我們就不再對其進(jìn)行講解，直接跳過，去看 JS 代碼。
<script>
$(document).ready(function () {
var dialog = $("#dialog");
var progressbar = $("#progressbar");
var progressLabel = $("#progressbar-label");
var progressTimer;
dialogButtons = [{
text: "取消下載",
click: closeDownload
}];
dialog.dialog({
autoOpen: false,
modal: true,
resizable: false,
buttons: dialogButtons
});
$("#openBtn").button().on("click", function () {
dialog.dialog("open");
setTimeout(progress, 2000);
})
progressbar.progressbar({
value: false,
change: function () {
progressLabel.text("正在下載 : " + progressbar.progressbar("value") + "%");
},
complete: function () {
progressLabel.text("下載完成");
dialog.dialog("option", "buttons", [{
text: "關(guān)閉",
click: closeDownload
}]);
}
})
function progress() {
var value = progressbar.progressbar("value") || 0;
progressbar.progressbar("value", value + 2);
if (value <= 99) {
progressTimer = setTimeout(progress, 30);
}
}
function closeDownload() {
clearTimeout(progressTimer);
dialog.dialog("close");
progressbar.progressbar("value", false);
progressLabel.text("正在加載");
}
})
</script>
1.一開始，我們聲明了幾個變量，接下來我們就可以通過變量對頁面標(biāo)簽進(jìn)行操作。
2.以上效果其實就是 Dialog 和 Progressbar 的使用，大多數(shù)屬性在以上我們都已經(jīng)介紹過了，下面我們針對邏輯進(jìn)行講解。首先，將彈出框設(shè)置成 關(guān)閉狀態(tài)，對 openBtn 綁定點擊事件，當(dāng)點擊觸發(fā)的時候，將彈出框打開，并且此時開始啟動 setTimeout()方法，開始讓 Progressbar 進(jìn)行加載，至于在其他地方我們對 ProgressLabel 文字的修改和對Dialog 按鈕文字的修改，我們就不再進(jìn)行講解。
注意到，我們上面的Progressbar 的顏色不再是默認(rèn)的灰色了，這是怎么修改的呢？這個屬性我們可以在 CSS 中就行修改。
<style>
#progressbar-label {
margin-bottom: 20px;
font-weight: bold;
}
.ui-dialog-titlebar-close {
display: none;
}
#progressbar .ui-progressbar-value{
background-color: aquamarine;
}
</style>
1.第一處是對 ProgressLabel 進(jìn)行位置和字體設(shè)定。
2.第二處是將彈出框右上角的關(guān)閉按鈕進(jìn)行隱藏。
3.第三處就是將Progressbar 的背景顏色進(jìn)行改變，我們可以將其改編成任意值。
