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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 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
图解上海144收音机
2021/03/02 无线电
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
php xml-rpc远程调用
2008/12/19 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
js实现拖拽功能
2017/03/01 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
使用Python实现一个简单的项目监控
2015/03/31 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
制药工程专业个人求职自荐信
2014/01/25 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书