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 打印内容方法小结
Nov 04 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
简单使用webpack打包文件的实现
Oct 29 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定时任务延缓执行的实现
2014/10/08 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP实现微信提现功能
2018/09/30 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
js类 from qq
2006/11/13 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
常见的python正则用法实例讲解
2016/06/21 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python网络应用开发知识点浅析
2019/05/28 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
django 外键创建注意事项说明
2020/05/20 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
自我评价是什么
2014/01/04 职场文书
先进个人获奖感言
2014/01/24 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
违章停车检讨书
2014/10/21 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
办公室主任个人总结
2015/02/28 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
table不让td文字溢出操作方法
2022/12/24 HTML / CSS