Latest Blogs
Recommended
A completed Steiner Stamp album page – This is page 5 of the Germany1949 pdf file and features numerals and eagles from the late 18th century.亲们该页面内会员们分享的“作品”，版权为才华横溢的原作者们所有滴，不得商业使用！
GaugeMeter是一款精美时尚的动态仪表盘插件。该仪表盘插件提供总多参数来用于配置，可以制作出完整圆形，半圆形和拱圆形的仪表盘。它的特点有：
仅一个js文件，没有其它依赖。
高度可配置和扩展。
提供大量内置主题。
众多的参数设置。
支持各种页面尺寸和页面颜色。
使用 渲染图形。
可通过data属性来配置参数。
使用该仪表盘插件需要引入jQuery(jquery1.10.2+)和jquery.AshAlom.gaugeMeter-2.0.0.min.js文件。
&script src="js/jquery.min.js"&&/script&
&script src="js/jquery.AshAlom.gaugeMeter-2.0.0.min.js"&&/script&
该仪表盘插件的基本HTML结构如下，data-percent属性指定的是圆形进度条的当前数值。
&div class="GaugeMeter" id="GaugeMeter_1" data-percent="10"&&/div&
在使用时需要为这个仪表盘添加一些必要的CSS样式。
.GaugeMeter{
Text-Align:
.GaugeMeter SPAN,
.GaugeMeter B{
Text-align:
RGBa(0,0,0,.8);
Font-Weight:
Font-Family:
"Open Sans", A
White-Space:
Text-Overflow:
.GaugeMeter[data-style="Semi"] B{
.GaugeMeter S,
.GaugeMeter U{
Text-Decoration: N
Font-Size:
.GaugeMeter B{
Font-Weight:
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该仪表盘插件。
$(document).ready(function(){
$(".GaugeMeter").gaugeMeter();
通过DATA属性来初始化
你也可以直接在HTML标签中使用data属性来初始化该仪表盘插件。
&div class="GaugeMeter" id="GaugeMeter_1" data-percent="10"
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-100之间的正整数
仪表盘的当前数值，必填参数
任何正整数
该参数用于覆盖data-percent设置的数值。例如：你要显示512GB的内存被使用了“25%”，那么这里要指定为128，在data-total参数中指定512
data-total
任何正整数
该参数用于覆盖data-percent设置的数值。例如：你要显示512GB的内存被使用了“25%”，那么data-used要指定为128，在data-total参数中指定512
它会替换仪表盘中间显示的data-percent数值
data-prepend
字符串（最大2 bytes）
在百分比数量之前添加的文本
data-append
字符串（最大2 bytes）
在百分比数量之后添加的文本，例如添加“%”
任何正整数
仪表盘的宽度和高度，单位像素
data-width
任何正整数
仪表盘圆形进度条的厚度
data-style
Full, Semi 或 Arch
是显示整圆，半圆还是arched-circle
data-color
十六进制颜色或RGBA颜色或HTML颜色名字（如red）
仪表盘圆形进度条的前景色。如果设置了data-theme属性，该属性会被覆盖
RGBA(0,0,0,.06)
十六进制颜色或RGBA颜色或HTML颜色名字（如red）
仪表盘圆形进度条的背景色。
data-theme
Red-Gold-Green
Red-Gold-Green
Green-Gold-Red
DarkBlue-LightBlue
LightBlue-DarkBlue
DarkRed-LightRed
LightRed-DarkRed
DarkGreen-LightGreen
LightGreen-DarkGreen
DarkGold-LightGold
LightGold-DarkGold
仪表盘圆形进度条的颜色渐变主题
data-animate_gauge_colors
布尔值0或1
如果该参数设置为可用，仪表盘圆形进度条的前景色将会根据data-theme中的渐变来在不同的圆形位置显示不同的颜色。该参数会覆盖data-color设置的值
data-animate_text_colors
布尔值0或1
如果该参数设置为可用，仪表盘圆形进度条的文本色将会根据data-theme中的渐变来在不同的圆形位置显示不同的颜色。该参数会覆盖data-color设置的值
data-label
显示在百分比数值下面的文本
data-label_color
十六进制颜色或RGBA颜色或HTML颜色名字（如red）
添加的文本的颜色
data-stripe
任何正整数
以直线或条纹来显示仪表盘圆形进度条。如果给出的值大于0，圆形进度条从直线变为条纹，值为条纹的厚度
下载资源：0 次
错误提交：
大小：54.85KB
================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博：同步网站更新内容，订阅jquery资源 @吐槽优设记，欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接：
非特殊说明，本文版权归原作者所有，转载请注明出处
我当前G币余额：0
已下载次数：0
注：点击右侧分享按钮并且留下评论自动+10G币
所需G币：20
下载提示：由于文件较小，请直接点击下载，不支持迅雷等下载工具。
不足，你可以通过
你可以直接下载，不消耗G币
&浙ICP备号-1 & Copyright (C) 2013
All Rights Reserved 您是第2717645位访客！