Jquery进度条插件 Progress Bar小问题解决_jquery

个人使用总结:

复制代码 代码如下:

<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>

时间: 2024-11-18 08:22:48

Jquery进度条插件 Progress Bar小问题解决_jquery的相关文章

jQMeter —— 各种花样的 jQuery 进度条插件

jQMeter 是一个简单的.轻量级的 jQuery 插件,它支持显示动态的水平或者是垂直进度条.还能够动态显示目标和完成量之间的关系. 你可以自定义外观,可以通过以下选项来自定义外观,如:宽度,高度,背景色,Bar 颜色等,还可以选择显示完成进度的百分比,以及控制动画的速度. https://yqfile.alicdn.com/5cc1193e2c663b0bd2e707c73fec676898e9d30d.png" > 文章转载自 开源中国社区 [http://www.oschina.

WEBJX收集jQuery的加载动画和进度条插件

文章简介:精心挑选的8款jQuery 加载动画和进度条插件. 加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐8款基于jQuery实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Per

自己动手制作基于jQuery的Web页面加载进度条插件_jquery

静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio

分享8款优秀的 jQuery 加载动画和进度条插件_jquery

加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQ

自定义刻度jQuery进度条及插件_jquery

简要教程 progressdots是一款可自定义刻度动画的jQuery进度条插件.通过该jQuery进度条插件你可以自定义进度条刻度圆点的数量,大小,颜色等属性,并且可以通过CSS来控制圆点的外观样式. 请看下面效果图了解相关插件. 使用该jQuery进度条插件需要引入jquery,jquery.progressdots.js和jquery.progressdots.css文件. <script src="jquery.min.js"></script> <

jquery插件uploadify实现带进度条的文件批量上传_jquery

有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案,分享给大家供大家参考,具体如下 先上效果图: 具体代码如下: 在页面中如下 完整页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <

jQuery.Uploadify插件实现带进度条的批量上传功能_jquery

本文实例讲述了jQuery.Uploadify插件实现带进度条的批量上传功能.分享给大家供大家参考,具体如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xh

Jquery Easyui进度条组件Progress使用详解(8)_jquery

本文实例为大家分享了Jquery Easyui进度条组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div> JS调用加载 <div id="box" style="width: 400px;">

pace.js页面加载进度条插件_javascript技巧

本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j