jquery进度条插件实例解析,jquery进度条代码分享

发布时间:2020-04-04编辑:脚本学堂
有关jquery进度条插件的例子,使用jquery类库文件实现进度条效果,jquery Progressbar进度条的实现代码,供大家学习参考。

引入jquery文件:
jquery-1.7.1.min.js  http://jqueryui.com/
jquery-ui-1.8.18.custom.min.js  http://jqueryui.com/download

jquery.ui.datepicker-zh-CN.js  该文件在下载好的第二个文件的该目录下: jquery-ui-1.8.18.customdevelopment-bundleuii18n
/jquery-ui-1.8.18.custom.css   该文件在下载好的第二个文件的该目录下:  jquery-ui-1.8.18.customcssui-lightness

jquery进度条代码
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery-ui-进度条效果 _www.jb200.com</title> 
<!--引入jquery类库文件--> 
<script type="text/javascript" language="javascript" src="./js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" language="javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script> 
 
<!--css--> 
<link type="text/css" rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" /> 
<script type="text/javascript"> 
$(function (){ 
$("#progressbar").progressbar({ 
value:37, //缺省值为0
});  
 
});  
</script> 
<style> 
.ui-progressbar-value { background-image: url(images/pbar-ani.gif); } 
</style> 
</head> 
<h2 class="">jquery-Progressbar-实现</h2>  
<div id="progressbar" style="height:22px;"></div> 
</body> 
</html> 

jquery进度条的效果图,如下
jquery进度条