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 相关文章推荐
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
jquery预加载图片的方法
May 27 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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
PHP4.04简明安装
2006/10/09 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
php微信开发之谷歌测距
2018/06/14 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
使用Python 统计高频字数的方法
2019/01/31 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
django的ORM操作 增加和查询
2019/07/26 Python
pycharm快捷键汇总
2020/02/14 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
机械专业应届生求职信
2013/09/21 职场文书
创建文明城市标语
2014/06/16 职场文书
2014年团支书工作总结
2014/11/14 职场文书
五年级学生评语大全
2014/12/26 职场文书