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对表单元素的取值和赋值操作代码
May 19 Javascript
js播放wav文件(源码)
Apr 22 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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基础知识:类与对象(1)
2006/12/13 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Python理解递归的方法总结
2019/01/28 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
企业晚会策划方案
2014/05/29 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
购房委托书范本
2014/09/18 职场文书
学校推普周活动总结
2015/05/07 职场文书