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 ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 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命名空间(Namespace)简明教程
2014/06/11 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
canvas知识总结
2017/01/25 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python工厂函数用法实例分析
2018/05/14 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
公司投资建议书
2014/05/16 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
五四青年节活动总结
2015/02/10 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书