Jquery进度条插件 Progress Bar插件应用方法

搞的我小纠结了一会,最后感谢同事分享文章,得以结局,呵呵,小经验还是要保存的
个人使用总结:

<script type="text/
网页特效" 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://download.csdn.net/detail/tianyacao8025/3925519  jquery.progressbar.js下载地址

Jquery进度条插件 Progress Bar插件应用方法,布布扣,bubuko.com

时间: 2024-10-26 09:16:44

Jquery进度条插件 Progress Bar插件应用方法的相关文章

Html5添加SVG的轻量级jQuery进度条插件教程

一.使用方法 使用该jQuery进度条插件需要引入jQuery和jquery.progress.js文件. <script src="js/jquery.min.js"></script> <script src="js/jquery.progress.js"></script> 二.Html结构 该jQuery进度条的HTML结构使用一个<svg>元素来制作. <svg id="conta

简单的jquery进度条插件LineProgressbar.js

参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgressbar.js" type="text/javascript"></script> $(function(){ $('#progressbar1').LineProgressbar({ percentage: 50 }); $('#progressbar2').L

超酷jQuery进度条加载动画集合

在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度条加载动画,每一个都非常具有创意.如果你喜欢,可以下载源码并将它们应用到自己的网站中去. HTML5 Canvas发光Loading动画 它是一个Loading加载动画,并不能实现具体进度的加载,但是可以提示用户数据或者页面正在加载.并且该应用利用Canvas绘制动画,效果非常不错. DEMO演示 

可自定义刻度jQuery进度条

可自定义刻度jQuery进度条是一款可以自定义进度条刻度圆点的数量,大小,颜色等属性,并且可以通过CSS来控制圆点的外观样式.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div id="container"> <div class="padded"> <div id="progressHolder"

cordova加载层、进度条、文件选择插件

在做cordova项目的时候,感觉应用的响应速度跟原生应用比相差甚远,一个主要问题就是如加载层.进度条等弹出对话框的效率不行.毕竟项目中的这些弹框都是用dom拼成的,dom的渲染效率和原生控件比起来慢也是正常的.为了能够让应用尽可能的接近原生应用的效果,我业余时间做了一套对话框插件,使用后应用的使用体验立马有了很大的提升.兼容ios和安卓平台.插件包括加载层.进度条.文件选择.项目已经放到了github,有兴趣的小伙伴可以下载试一试. 插件只支持cordova5.0及以上版本,初始化如下: co

Html5添加时尚的圆形进度条样式的倒计时插件教程

一.使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/kinetic.js"></script> <script type="text/javascript" src="js/jq

iOS 实现进度条(progress)

#import <UIKit/UIKit.h> @interface ZSDProgressView : UIView { UIView *progressView;//进度view } //进度值 @property(nonatomic,assign)float progress; @end #define UIColorFromRGB(rgbValue) [UIColor \ colorWithRed:((float)((rgbValue & 0xFF0000) >>

闲话进度条

对于程序员来说,进度条(progress bar)大家都很熟悉,进度条有不同的展现形式,包括传统的横向进度条以及各种loading图; 也有不同的实现方法,各种黑科技黑魔法.本文探讨两个问题,第一个为什么要有进度条; 第二个,进度条实现的一点点知识.重点在前者. 为什么要有进度条,前些天在知乎日报上看到一个神吐槽: --为什么男生追女生追着追着就放弃了? --没有进度条提示啊 不禁想到前一段时间在阅读<暗时间>的时候,也看到了这个问题.简单来说,进度条让人心里有个预期(有盼头),让人相信总会完

一个Notification 进度条插件(android,NJS实现,直接就可使用)

参考文章:http://ask.dcloud.net.cn/article/503 源码地址下载 如题,分享一个Notification 进度条插件(android,用js调用原生api实现,直接就可以使用).参考1: http://ask.dcloud.net.cn/article/155参考2:http://ask.dcloud.net.cn/question/2464 详细介绍: 最近有一个需求是,android更新资源包时,需要在通知栏里显示下载进度条,于是就搜索了下已有的解决方案发现并