GaugeMeter是一款精美时尚的jQuery动态仪表盘插件。该仪表盘插件提供总多参数来用于配置,可以制作出完整圆形,半圆形和拱圆形的仪表盘。它的特点有:
仅一个js文件,没有其它依赖。
高度可配置和扩展。
提供大量内置主题。
众多的参数设置。
支持各种页面尺寸和页面颜色。
可通过data属性来配置参数。
使用方法
使用该仪表盘插件需要引入jQuery(jquery1.10.2+)和jquery.AshAlom.gaugeMeter-2.0.0.min.js文件。
HTML结构
该仪表盘插件的基本HTML结构如下,data-percent属性指定的是圆形进度条的当前数值。
CSS样式
在使用时需要为这个仪表盘添加一些必要的CSS样式。
.GaugeMeter{
Position: Relative;
Text-Align: Center;
Overflow: Hidden;
Cursor: Default;
}
.GaugeMeter SPAN,
.GaugeMeter B{
Margin: 0 23%;
Width: 5%;
Position: Absolute;
Text-align: Center;
Display: Inline-Block;
Color: RGBa(0,0,0,.8);
Font-Weight: 100;
Font-Family: "Open Sans", Arial;
Overflow: Hidden;
White-Space: NoWrap;
Text-Overflow: Ellipsis;
}
.GaugeMeter[data-style="Semi"] B{
Margin: 0 10%;
Width: 80%;
}
.GaugeMeter S,
.GaugeMeter U{
Text-Decoration: None;
Font-Size: .49em;
Opacity: .5;
}
.GaugeMeter B{
Color: Black;
Font-Weight: 300;
Opacity: .8;
}
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该仪表盘插件。
$(document).ready(function(){
$(".GaugeMeter").gaugeMeter();
});
通过DATA属性来初始化
你也可以直接在HTML标签中使用data属性来初始化该仪表盘插件。
data-text="Spendings"
data-total="1024"
data-used="256"
data-prepend="$"
data-append=".00"
data-size="200"
data-width="2"
data-style="Semi"
data-color="Blue"
data-back="Silver"
data-theme="Red-Gold-Green"
data-animate_gauge_colors="1"
data-animate_text_colors="1"
data-label="VISA Card"
data-label_color="#F00"
data-stripe="2"
>
配置参数
下面是该仪表盘插件的一些可用参数,这些参数也可以在HTML DOM元素的data标签中使用。
参数
默认值
可用值
描述
data-percent
0
任何0-100之间的正整数
仪表盘的当前数值,必填参数
data-used
0
任何正整数
该参数用于覆盖data-percent设置的数值。例如:你要显示512GB的内存被使用了“25%”,那么这里要指定为128,在data-total参数中指定512
data-total
100
任何正整数
该参数用于覆盖data-percent设置的数值。例如:你要显示512GB的内存被使用了“25%”,那么data-used要指定为128,在data-total参数中指定512
data-text
null
字符串
它会替换仪表盘中间显示的data-percent数值
data-prepend
null
字符串(最大2 bytes)
在百分比数量之前添加的文本
data-append
null
字符串(最大2 bytes)
在百分比数量之后添加的文本,例如添加“%”
data-size
100
任何正整数
仪表盘的宽度和高度,单位像素
data-width
3
任何正整数
仪表盘圆形进度条的厚度
data-style
Full
Full, Semi 或 Arch
是显示整圆,半圆还是arched-circle
data-color
#2C94E0
十六进制颜色或RGBA颜色或HTML颜色名字(如red)
仪表盘圆形进度条的前景色。如果设置了data-theme属性,该属性会被覆盖
data-back
RGBA(0,0,0,.06)
十六进制颜色或RGBA颜色或HTML颜色名字(如red)
仪表盘圆形进度条的背景色。
data-theme
Red-Gold-Green
Red-Gold-Green
Green-Gold-Red
Green-Red
Red-Green
DarkBlue-LightBlue
LightBlue-DarkBlue
DarkRed-LightRed
LightRed-DarkRed
DarkGreen-LightGreen
LightGreen-DarkGreen
DarkGold-LightGold
LightGold-DarkGold
White
Black
仪表盘圆形进度条的颜色渐变主题
data-animate_gauge_colors
0
布尔值0或1
如果该参数设置为可用,仪表盘圆形进度条的前景色将会根据data-theme中的渐变来在不同的圆形位置显示不同的颜色。该参数会覆盖data-color设置的值
data-animate_text_colors
0
布尔值0或1
如果该参数设置为可用,仪表盘圆形进度条的文本色将会根据data-theme中的渐变来在不同的圆形位置显示不同的颜色。该参数会覆盖data-color设置的值
data-label
null
字符串
显示在百分比数值下面的文本
data-label_color
Black
十六进制颜色或RGBA颜色或HTML颜色名字(如red)
添加的文本的颜色
data-stripe
0
任何正整数
以直线或条纹来显示仪表盘圆形进度条。如果给出的值大于0,圆形进度条从直线变为条纹,值为条纹的厚度