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 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
详解Vue数据驱动原理
Nov 17 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 不同编码下的字符串长度区分
2009/09/26 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
线程和进程的区别及Python代码实例
2015/02/04 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
总会计师岗位职责
2014/02/19 职场文书
绿色环保演讲稿
2014/05/10 职场文书
购房个人委托书范本
2014/10/11 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python