jquery-ui 进度条功能示例【测试可用】

2019-11-19 11:08:22

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jquery-ui 进度条功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html><head><meta charset="utf8" /><title>www.VeVB.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" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.css" 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>

运行效果：