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 相关文章推荐
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
遨游,飞飞,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.MVC的模板标签系统(三)
2006/09/05 PHP
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
Python中return语句用法实例分析
2015/08/04 Python
python 识别图片中的文字信息方法
2018/05/10 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
python创建子类的方法分析
2019/11/28 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python如何实现定时器功能
2020/05/28 Python
python创建文本文件的简单方法
2020/08/30 Python
python判断元素是否存在的实例方法
2020/09/24 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
2015财务年终工作总结范文
2015/05/22 职场文书
网络妈妈观后感
2015/06/08 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
利用python做数据拟合详情
2021/11/17 Python