jQMeter.js —动态进度条插件
来源:互联网 发布:php在线音乐网站源码 编辑:程序博客网 时间:2024/06/05 11:03
简介
是一款简单实用的轻量级进度条jQuery插件,插件可以让您轻松实现带动画效果的水平或垂直进度条,你只需传参数或是配置下选项就可以完成你想要的进度条效果。
插件使用了一个out-of-the-box的简单设计,目的是为了方便您通过参数选项配置您想到的进度条效果,这些参数包括:宽度、高度、背景色、进度条颜色等等,通过这些参数你可以构造自己的进度条样式。
使用方法
1、构建html
插件的html非常简单,只需一个带ID或class的空DIV就可以了。
1
<
div
id
=
"jqmeter-container"
></
div
>
2、引入文件
1
2
<
script
src
=
"js/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
type
=
"text/javascript"
src
=
"js/jqmeter.min.js"
></
script
>
初始化插件
1
2
3
$(document).ready(
function
(){
$(
'#jqmeter-container'
).jQMeter();
});
进度条插件有两个必填的参数:goal和raised。此外还有一些可用的参数,其中一些参数也可以使用css来实现,如颜色参数。
1
2
3
4
5
6
7
$('#jqmeter-container').jQMeter({
goal:'$1,000',
raised:'$200',
orientation:'vertical',
width:'50px',
height:'200px'
});
参数
参数类型默认值描述goalstring无默认值,必填参数进度条的总长度。可以设置为字符串,如"$9000",或整数,如:"9000"raisedstring无默认值,必填参数进度条的当前进度。可以设置为字符串,如"$5000",或整数,如:"5000"widthstring100%-水平宽度。(在水平进度条中必须设置)设置进度条的水平宽度。可以设置为百分比或像素值heightstring50px。(在垂直进度条中必须设置)设置进度条的垂直高度。可以设置为百分比或像素值bgColorstring#444进度条的背景颜色。支持hex、rgba和颜色关键字。barColorstring#bfd255进度条的颜色。支持hex、rgba和颜色关键字。orientationstringhorizontal进度条的方向,可设置为: 'horizontal' 或 'vertical'。如果设置为垂直进度条,该参数必须设置。displayTotalbooleantrue是否显示进度条完成的百分比数。animationSpeedinteger2000进度条动画时间,单位毫秒counterSpeedinteger2000进度条计数的时间,单位毫秒jQMeter首页、文档和下载 :http://www.oschina.net/p/jqmeter (含GitHub下载)
0 0
- jQMeter.js —动态进度条插件
- jQMeter.js —动态进度条插件
- 简单进度条插件JS
- php js 动态进度条
- NProgress.js全站jquery进度条插件
- js+css3实现一个环形进度条插件
- js进度条插件之spin使用方式
- 利用JS实现动态进度条效果
- 6 款绚丽的 JS 加载和进度条插件
- 6 款绚丽的 JS 加载和进度条插件
- CSS3和js谷歌Material Design进度条插件
- pace.js – 网页自动加载进度条插件
- pace.js – 网页自动加载进度条插件
- NProgress.js全站进度条插件 中文API
- pace.js网页自动加载进度条插件-好东西
- 动态进度条
- 动态进度条
- js进度条
- Android学习:广播机制
- redis mset是否具有原子性
- C7-3 用类实现a+b
- 解决python中TypeError: not enough arguments for format string
- mysql 学习笔记
- jQMeter.js —动态进度条插件
- winrar去掉烦人的广告 亲测有效
- 浏览器的一些兼容问题(1)
- Git服务器Gitosis安装设置-git权限管理
- jS 消息推送通知 goEasy
- leetCode练习(66)
- 关于php编程中出现乱码的字符集的问题
- IIC地址决定,8位地址,减去1位广播地址,是7位地址,2^7=128,但是地址0x00不用,那就是127个地址
- 进制