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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
js文字滚动停顿效果代码
Jun 28 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
node.js入门教程
Jun 01 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
vue 全局环境切换问题
Oct 27 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
ant design charts 获取后端接口数据展示
May 25 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
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
js注入 黑客之路必备!
2016/09/14 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
redux-saga 初识和使用
2018/03/10 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
基于python 字符编码的理解
2017/09/02 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
公务员个人自我评价分享
2013/11/06 职场文书
工作迟到检讨书
2014/02/21 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
我的祖国演讲稿
2014/05/04 职场文书
管理提升方案
2014/06/04 职场文书
学校班班通实施方案
2014/06/11 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
给校长的建议书范文
2015/09/14 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP