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


Posted in Javascript onJuly 12, 2011

个人使用总结:

<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>

Javascript 相关文章推荐
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
VueJS实现用户管理系统
May 29 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 #Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 #Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 #Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 #Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 #Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 #Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 #Javascript
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
python 决策树算法的实现
2020/10/09 Python
c/c++某大公司的两道笔试题
2014/02/02 面试题
C#中的验证控件有几种
2014/03/08 面试题
暑期社会实践学生的自我评价
2014/01/09 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
八一建军节活动方案
2014/02/10 职场文书
李培根演讲稿
2014/05/22 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
导游词之南京中山陵
2019/11/27 职场文书
导游词之镜泊湖
2019/12/09 职场文书
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server