`
sty2008boy
  • 浏览: 299385 次
  • 性别: Icon_minigender_1
  • 来自: 太原
社区版块
存档分类
最新评论

jQuery progressBar jQuery progressBar 1.1

阅读更多
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>

分享到:
评论

相关推荐

    jQuery progressbar进度条插件提示进度条进度百分比数据

    在本文中,我们将深入探讨如何使用jQuery的progressbar插件来创建一个动态的进度条效果,并在用户鼠标滑过时展示进度的百分比数据。jQuery是一个轻量级的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果,...

    jquery.progressbar.2.01进度条显示插件

    jQuery Progressbar 2.01 是一个用于在网页中创建美观、动态进度条效果的JavaScript插件。这个插件基于广泛使用的jQuery库,为开发者提供了一种简单且灵活的方式来展示各种加载过程或任务完成的进度。 一、jQuery ...

    jQuery progressBar - jQuery进度条插件.progressbar.1.2

    jQuery progressBar 是一个非常实用的前端开发插件,用于在网页中创建动态的进度条效果。这个插件基于广泛使用的JavaScript库jQuery,它为开发者提供了一种简单、灵活的方式来展示各种加载进度、任务完成度或者时间...

    Jquery progressbar通过Ajax请求获取后台进度演示

    在本文中,我们将深入探讨如何使用jQuery Progressbar与Ajax相结合,来实时展示后台处理任务的进度,特别是在一个基于Struts2框架的应用中。这个过程包括前端的jQuery Progressbar组件的设置,以及后端如何发送进度...

    jquery progressBar 进度条

    `jquery progressBar`就是jQuery提供的一种实现进度条功能的组件,常用于展示任务完成的进度或者数据加载状态,为用户提供了良好的交互体验。本文将深入探讨如何使用jQuery和jQuery UI库中的progressbar组件,以及其...

    jquery.progressbar.2.0.zip

    《jQuery ProgressBar:构建动态进度条的利器》 在网页交互设计中,进度条是一个不可或缺的元素,它能够向用户展示任务执行的进度,提供良好的用户体验。jQuery作为一个强大的JavaScript库,其丰富的插件库中就包括...

    jquery 进度条插件progressbar

    jQuery Progressbar 是一款广泛使用的JavaScript库,用于在网页上创建美观且功能丰富的进度条组件。这个插件允许开发者轻松地创建动态变换的进度效果,并且支持彩色和自定义样式,以适应各种用户界面的需求。 首先...

    jquery.progressbar

    **jQuery ProgressBar 深入解析** 在Web开发中,用户界面的交互性和用户体验至关重要。`jQuery ProgressBar` 是一个非常实用的工具,它提供了一个可视化的进度条,可以用于展示加载数据、执行操作或任何需要反馈的...

    jquery进度条progressBar(多彩版)

    jQuery ProgressBar是jQuery的一个插件,能够方便地创建各种样式和功能的进度条。 这个“多彩版”的jQuery进度条可能提供了自定义颜色和样式的能力,允许开发者根据自己的设计需求来调整进度条的外观。在“demo....

    jQuery progressbar通过Ajax请求实现后台进度实时功能

    在本文中,我们将深入探讨如何使用jQuery progressbar与Ajax技术结合来实现在后台处理任务时的实时进度显示功能。jQuery progressbar是一个非常有用的组件,它允许我们创建动态、交互式的进度条,为用户提供可视化的...

    Jquery ProgressBar 进度条

    Jquery进度条插件至今我已经发现很多了,但是一直都没怎么研究,为什么?呵呵,因为有的进度条插件,我一看图片展示立马就没了兴趣,因为太丑了。具体那些进度条插件到底好不好用,我还真不知道,但是昨天我偶尔在...

    jQuery进度条jquery-progressbar.zip

    jquery-progressbar 是一个显示在页面上滚动的进度指示器插件,它跟 YouTube 进度条相似。当页面加载时,YouTube 的页面进度条能指示,但是这个插件能在页面滚动时显示。 标签:jquery

    Struts2.0+jquery.progressbar实现上传文件进度条 实例源码

    Struts2.0+jquery.progressbar实现上传文件进度条 附带实例源码 uploadJqueryProgress.jsp uploadprogress.jsp 两个上传页面,两种不一样风格的进度条。uploadJqueryProgress.jsp 是在 uploadprogress.jsp 的基础...

    jQuery-plugin-progressbar

    首先,您需要下载jQuery-plugin-progressbar.js和jQuery-plugin-progressbar.css #### demo &lt; div xss=removed&gt; &lt; / div &gt; &lt; div xss=removed xss=removed xss=removed xss=removed&gt; &lt; / div &gt; ...

    LineProgressbar:一个轻量级的jquery progressbar插件

    一个轻量级的jquery progressbar插件 演示和文档 包括 &lt;!-- In header --&gt; &lt;link rel="stylesheet" href="jquery.lineProgressbar.css"&gt; &lt;!-- In footer --&gt; [removed][removed] [removed]...

    使用commons-fileupload-1.2.2和jquery的progressbar实现的进度条

    本篇将讨论如何使用Apache Commons FileUpload 1.2.2库和jQuery的progressbar插件来实现这样的功能。 Apache Commons FileUpload是一个Java库,专门处理HTTP请求中的多部分形式数据,即通常用于上传文件的数据格式...

    Jquery ProccessBar

    JQuery ProccessBar(实际应为JQuery ProgressBar)是一款基于jQuery框架的轻量级进度条插件。它继承了jQuery简洁易用的特点,并且提供了丰富的自定义选项,使得开发者能够轻松地在网页中集成美观实用的进度条控件。...

    jquery进度条实现方案

    jQuery Progressbar插件是jQuery UI库中的一个组件,它允许开发者轻松地在网页上创建动态的进度条。进度条可以用来显示任务完成的百分比,非常适合于实时更新用户状态的场景,如文件上传、数据处理或如本例中的...

Global site tag (gtag.js) - Google Analytics