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面向对象编程
Mar 02 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JavaScript setTimeout()基本用法有哪些
Nov 04 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中设置index.php文件为只读的方法
2013/02/06 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
django页面跳转问题及注意事项
2019/07/18 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python 检测图片是否有马赛克
2020/12/01 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
设计模式的基本要素是什么
2014/04/21 面试题
吃空饷专项治理工作实施方案
2014/03/04 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
java设计模式--七大原则详解
2021/07/21 Java/Android