Jquery进度条插件 Progress Bar小问题解决

更新时间：2011年07月12日 23:23:27 作者：

今天遇到一个进度条的小问题，搞的我小纠结了一会，最后感谢同事分享文章，得以结局，呵呵，小经验还是要保存的

个人使用总结：

 
<script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js"></script>【Progresbar插件很重要】 
<script type="text/javascript"> 
$(document).ready(function () { 
　　　　$("#progress1").progressBar(68, { barImage: '/content/images/progressbg_red.gif' }); 
　　}); 
</script> 
<div id="progress1"> </div> 

JQuery Progress Bar是基于JQuery开发的进度条插件，秉承了JQuery的简约哲学。
不仅容易使用，而且可以轻松定制外观。对于使用了JQuery框架的项目来说，
需要使用进度条控件时这是一个不错的选择。
JQuery Progress Bar与常规插件一样，只要用选择器选择一个HTML元素后，
直接调用插件的公开方法即可。它提供的公开方法名称为progressBar()。
那么，当HTML页面上有一个id为progress1的元素时，可以这样初始化该控件：
$("#progress1").progressBar();
它的构造函数可以接收如下表所示的参数。

方法及参数	用途
progressBar()	按默认设置初始化一个进度条
progressBar(persent)	按默认设置初始化或更新一个进度条，设置进度条的百分比至persent%.
progressBar(config)	按config中指定的设置初始化一个进度条，百分比为0%。注意不要在初始化之后使用该方法来更改进度条的设置，否则可能引起显示不正常。
progressBar(persent,config)	按config中指定的设置初始化一个进度条，百分比为persent%。注意不要在初始化之后使用该方法来更改进度条的设置，否则可能引起显示不正常。

其中，config参数是一个哈希结构对象，它包含了如下属性用于设置进度条的外观特性

属性	用途
increment	设置进度条每步的增长度。默认值为2。
speed	设置进度条初始化时动态滑动效果的速度。默认值为15。这个值越大，则滑动速度越慢。
showText	设置是否显示百分比标识文字。默认值为ture，即显示百分比文字标识。
boxImage	设置边框图片。默认值为images/progressbar.gif。如需定制边框，则修改该属性，指向要使用的图片即可。
barImage	设置进度标识图片。默认值为images/progressbg_green.gif。如需定制，则修改该属性，指向要使用的图片即可。这个图片分类两节，前半节用于标识完成进度，后半截用于标识剩余未完成进度。两节长度相等，且等于进度条的宽度。
width	设置进度条的宽度，这个值必须与barImage和boxImage所指向的图片相适应。默认值为120。
height	设置进度条的高度，这个值必须与barImage和boxImage所指向的图片相适应。默认值为12。

复制代码代码如下:

 
$(document).ready(function() { 
$("#spaceused1").progressBar(); 
$("#spaceused2").progressBar({ barImage: 'images/progressbg_yellow.gif'} ); 
$("#spaceused3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} ); 
$("#spaceused4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} ); 
$("#uploadprogressbar").progressBar(); 
}); 

http://t.wits.sg/misc/jQueryProgressBar/demo.php#

http://www.bram.us/projects/js_bramus/jsprogressbarhandler/#download

<script type="text/javascript"> $("#loading").fadeOut() </script>

您可能感兴趣的文章:

Progress
Bar

为jQuery添加Webkit的触摸的方法分享
这段代码是我在做13年一份兼职的时候无聊加上去的，为jQuery添加触摸事件的支持。因为做得有点无聊，所以就帮客户添加了用响应式网页+JS touch兼容了移动设备，主要是Webkit的移动设备
2014-02-02
从零开始学习jQuery (一) 开天辟地入门篇
本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.
2010-10-10
jquery获得keycode的示例代码
本篇文章主要是对jquery获得keycode的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
jquery滚动特效集锦
本文给大家汇总介绍的是jquery单行滚动、批量多行滚动、文字图片翻屏滚动效果代码，都是分厂常用的一些文字以及图文的无缝滚动特效，希望能够对大家熟悉jQuery有所帮助。
2015-06-06
jQuery实现表单动态添加数据并提交的方法
这篇文章主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考下
2018-07-07
jQuery使用addClass()方法给元素添加多个class样式
这篇文章主要介绍了jQuery使用addClass()方法给元素添加多个class样式的方法,实例分析了addClass方法的使用技巧及添加多个样式的实现方法,需要的朋友可以参考下
2015-03-03
jquery 动态遍历select 赋值的实例
今天小编就为大家分享一篇jquery 动态遍历select 赋值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
jquery实现点击弹出对话框
这篇文章主要为大家详细介绍了jquery实现点击弹出对话框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
jquery中获得元素尺寸和坐标的方法整理
这篇文章主要介绍了jquery中获得元素尺寸和坐标的方法,需要的朋友可以参考下
2014-05-05
使用jquery解析XML示例代码
这篇文章通过示例为大家介绍了使用jquery解析XML的方法,经测试比较实用，需要的朋友可以参考下
2014-09-09