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.1.2。 PHP版本
jquery 进度条插件progressbar 彩色可自定义进度条图片 动态变换进度效果
jQuery progressbar进度条插件提示进度条进度百分比数据
bootstrap-progressbar是一款功能非常齐全的基于Bootstrap的jQuery进度条插件。该bootstrap进度条插件提供了对所有版本的Bootstrap的支持。它通过jQuery和CSS3 transition完成进度条的动画功能,可以显示当前的进度...
绝对好用的jquery进度条,用法都列出来了,不会用的留言哈
jquery.progressbar.2.01进度条显示插件
jquery progressBar 进度条
用jquery制作一个轻量级的动画进度条特效 progressbar 适用在统计记录与评论打分等的网页模块,带动画的进度条过程,让这 progressbar 进度条特效更加的有动感与逼真。
Jquery进度条插件至今我已经发现很多了,但是一直都没怎么研究,为什么?呵呵,因为有的进度条插件,我一看图片展示立马就没了兴趣,因为太丑了。具体那些进度条插件到底好不好用,我还真不知道,但是昨天我偶尔在...
jquery progressbar进度条插件,jquery CSS3进度条插件 适时显示进度和百分比,这是一个插件,示例页面演示了效果,另外演示了具体的代码调用方法,示例中的三个进度条的进度彼此不一样。进度条本身使用了一张背景...
jquery-progressbar 是一个显示在页面上滚动的进度指示器插件,它跟 YouTube 进度条相似。当页面加载时,YouTube 的页面进度条能指示,但是这个插件能在页面滚动时显示。 标签:jquery
Absolute ProgressBar 一个简单的轻量级但可配置的 jQuery 进度条插件。 基本用法 包括jQuery: < script src =" https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js " > </ script >...
jquery progressbar 话费使用套餐
花生米AJAX-UI系列之:基于JQUERY的Progress进度条控件0.1版 特点: 默认样式类似于EXT 可定义进度条的最大,最小值,进度条的宽度和高度; 可定义进度条的背景样式,边框颜色; 可分别绑定当进度改变时,当进度完全...
Struts2.0+jquery.progressbar实现上传文件进度条 附带实例源码 uploadJqueryProgress.jsp uploadprogress.jsp 两个上传页面,两种不一样风格的进度条。uploadJqueryProgress.jsp 是在 uploadprogress.jsp 的基础...
Bootstrap Progressbar 是一个 jQuery 插件,扩展了基本引导进度。它通过添加 Javascript 中预先存在的 CSS 转换提供了动态进度条。此外,你可以在动态进度条中通过回调显示当前进度信息。代码示例:default ...
进度条插件,通常使用纯JavaScript库,因此您可以将其与任何技术框架(例如angular,jquery等)一起使用。 演示: #如何使用 ? 包括 < script type =" text/javascript " src =" ...
Jquery实现进度条显示百分比 Jquery实现进度条显示百分比 Jquery实现进度条显示百分比
个人使用总结: 代码如下: [removed][removed] [removed][removed]【Progresbar插件很重要】 [removed] $(document).ready(function () { $(“#progress1”).progressBar(68, { b