jquery-ui 進(jìn)度條功能示例【測試可用】
更新時間：2019年07月25日 11:03:34 作者：xshang
這篇文章主要介紹了jquery-ui 進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了jquery-ui 結(jié)合時間函數(shù)實(shí)現(xiàn)進(jìn)度條功能相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jquery-ui 進(jìn)度條功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>www.dhdzp.com progressbar</title>
<style type="text/css">
#divprogressbar{
width:300px;
height:30px;
}
.progress-label{
float:left;
margin-left:40%;
margin-top:3px;
}
</style>
<link rel="stylesheet" rel="external nofollow" media="screen"/>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="divprogressbar"><div class="progress-label">loading...</div></div>
<script type="text/javascript">
$(function(){
// var val=0;
$('#divprogressbar').progressbar({value:0});
$('#divprogressbar').progressbar({
value:0,
change:function(){
$(".progress-label").text($("#divprogressbar").progressbar("value")+"%");
},
complete:function(){
$(".progress-label").text("Complete!");
}
});
function progress(){
var val= $('#divprogressbar').progressbar("value") || 0;
$('#divprogressbar').progressbar("option","value",val+1);
if(val<99)
{
setTimeout(progress,100);
}
}
setTimeout(progress,1000);
}
);
</script>
</body>
</html>
運(yùn)行效果：
查看文檔：http://jqueryui.com/progressbar/
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jquery插表單件form使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
JQuery設(shè)置獲取下拉菜單某個選項(xiàng)的值(比較全)
這篇文章主要介紹了JQuery如何設(shè)置獲取下拉菜單某個選項(xiàng)的值(比較全),需要的朋友可以參考下2014-08-08
jQuery插件FusionCharts實(shí)現(xiàn)的MSBar2D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的MSBar2D圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件結(jié)合xml數(shù)據(jù)載入實(shí)現(xiàn)繪制MSBar2D圖的相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2017-03-03
基于jquery實(shí)現(xiàn)最簡單的選項(xiàng)卡切換效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)最簡單的選項(xiàng)卡切換效果的相關(guān)資料，具有一定的參考價值，感興趣的朋友可以參考一下2016-05-05
這篇文章主要介紹的是自己用jQuery寫了一個圖片的馬賽克消失效果實(shí)現(xiàn)過程,需要的朋友可以參考下2014-05-05
element form 校驗(yàn)數(shù)組每一項(xiàng)實(shí)例代碼
這篇文章主要介紹了element form 校驗(yàn)數(shù)組每一項(xiàng)的實(shí)例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)簡單穿梭框方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
關(guān)于用Jquery的height()、width()計算動態(tài)插入的IMG標(biāo)簽的寬高的問題
關(guān)于用Jquery的height()、width()計算動態(tài)插入的IMG標(biāo)簽的寬高的問題的解決方法，需要的朋友可以參考下。2010-12-12
這篇文章主要介紹了jQuery中$.each使用詳解,需要的朋友可以參考下2015-01-01
S2SH整合JQuery+Ajax實(shí)現(xiàn)登錄驗(yàn)證功能實(shí)現(xiàn)代碼
登錄驗(yàn)證,在項(xiàng)目開發(fā)中很常用的，尤其是這一塊非常有利于用戶體驗(yàn)，感興趣的朋友可以參考下，或許對你學(xué)習(xí)登陸驗(yàn)證有所幫助，好了閑話不多說了，看代碼2013-01-01