JQuery中简约的进度条插件推荐
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。 |
与服务器的交互就不在这里讲了,就只是使用ajax从服务器获取进度值,然后用progressBar(persent)更新进度即可。
JQuery中简约的进度条插件推荐的更多相关文章
- jQuery网页加载进度条插件
jquery.pace.js会自动监测你的Ajax请求,事件循环滞后,记录您的页面上准备状态和元素来决定的进度情况. 将pace.js和主题css的添加到您的网页! pace.js会自动监测你的Aja ...
- 简单的jquery进度条插件LineProgressbar.js,myProgress.js
参考 http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- HTML5圆形百分比进度条插件circleChart
在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...
- YprogressBar,html5进度条样式,js进度条插件
简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...
- 一个Notification 进度条插件(android,NJS实现,直接就可使用)
参考文章:http://ask.dcloud.net.cn/article/503 源码地址下载 如题,分享一个Notification 进度条插件(android,用js调用原生api实现,直接就可 ...
- 第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
随机推荐
- 移动App 的 ios11 和 iPhoneX 适配
原文链接:https://blog.csdn.net/lovelyelfpop/article/details/79460700 WKWebView 调用拨打电话功能 1.HTML 要标记添加标记电话 ...
- Docker应用系列(二)| 构建Zookeeper集群
本示例基于Centos 7,在阿里云的三台机器上部署zookeeper集群,假设目前使用的账号为release,拥有sudo权限. 由于Docker官方镜像下载较慢,可以开启阿里云的Docker镜像下 ...
- Vue 2.0学习(六)内置指令
基本指令 1.v-cloak v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none配合使用. <div id="ap ...
- Python 正则表达式中级
首先是?: 在括号中用?:用在findall和split之中,去除括号优先级. 如果不用只输出括号内匹配的值 r 的作用是转义python里面换行符等,像是\n 不用加\来转义 1.子表达式 ...
- 贪心:zoj3953 Intervals
Description Chiaki has n intervals and the i-th of them is [li, ri]. She wants to delete some interv ...
- 「ZJOI2009」多米诺骨牌
「ZJOI2009」多米诺骨牌 题目描述 有一个n × m 的矩形表格,其中有一些位置有障碍.现在要在这个表格内 放一些1 × 2 或者2 × 1 的多米诺骨牌,使得任何两个多米诺骨牌没有重叠部分,任 ...
- scrapy--将爬取得数据保存到数据库中
首先要做的: 建库 article 建表 article 在cmd中的工作环境中安装mysql的驱动 mysqlclient pip install mysqlclient #如果是使用centos ...
- phpRedis函数使用总结
/*1.Connection*/ $redis = new Redis(); $redis->connect('127.0.0.1',6379,1);//短链接,本地host,端口为6379,超 ...
- noip2011初赛提高组 试题详解
转载自:https://blog.csdn.net/Eirlys_North/article/details/52889993 一.单项选择题(共20题,每题1.5分,共计30分,每题有且仅有一个正确 ...
- UESTC 2015dp专题 G 邱老师玩游戏 背包dp
邱老师玩游戏 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/65 Descr ...