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 getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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版)
2012/08/21 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
如何教少儿学习Python编程
2020/07/10 Python
Python grpc超时机制代码示例
2020/09/14 Python
如何利用python 读取配置文件
2021/01/06 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
医药工作者的求职信范文
2013/09/21 职场文书
专科毕业生就业推荐信
2013/11/01 职场文书
后备干部考察材料
2014/02/12 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android