//CSS樣版
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function () {
//設定Progressbar
var progressbar = $("#progressbar"),
progressLabel = $(".progress-label");
progressbar.progressbar({
value: false,
change: function () {
progressLabel.text(progressbar.progressbar("value") + "%");
},
complete: function () {
progressLabel.text("Complete!");
}
});
var intervalID = setInterval(progress, 250);
//觸發Read ajax
var strURL = "source.ashx";
$.ajax({
type: 'GET',
data: { parms: Math.random() },
url: strURL,
contentType: "application/json; charset=utf-8",
dataType: 'json',
error: function () {
alert('Ajax request 發生錯誤');
},
success: function (result) {
$("#progressbar").progressbar("value", 100);
$("#progressbar").hide();
}
});
});
function progress() {
var val = $("#progressbar").progressbar("option", "value")
if (val < 100) {
$("#progressbar").progressbar("value", val + 1);
}
}
</script>
<div id="progressbar"></div>
參考資訊：
http://horacerobot.blogspot.tw/2010/12/jquery-ajax-mvc-jquery-ui-progress-bar.html
http://jqueryui.com/progressbar/#label
