html5仪表盘插件,精美时尚的jQuery动态仪表盘插件
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,圆形进度条从直线变为条纹,值为条纹的厚度
html5仪表盘插件,精美时尚的jQuery动态仪表盘插件相关推荐
- 我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
- Jsp中Uploadify插件的使用(jQuery上传插件)
原文地址:Jsp中Uploadify插件的使用(jQuery上传插件)作者:项海军 该插件使用的是jQuery,Flash和后端(您选择哪种语言实现的上传)脚本的组合. 如何来使用它? --执行此插件 ...
- html怎么把图片做成一条花纹,html5 canvas生成精美网页花纹背景图像js插件
这是一款可以在指定容器中生成精美网页背景花纹图像的js插件.该花纹背景插件使用js来生成html5 canvas,并在canvas中绘制各种花纹图像.生成的背景花纹图像可以是静态的,也可以制作成动态花 ...
- HTML5 元素拖拽实现 及 jquery.event.drag插件
如上图片: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" co ...
- [置顶] Web开发百宝箱——提升网站档次的时尚 jQuery 图片滚动插件
这篇文章向大家推荐8款时尚的 jQuery 图片滚动插件.jQuery 是最流行和使用最广泛的 JavaScript 框架,它可以让帮助你在你的项目中加入一些很炫的图片滚动效果.希望这些插件对你有所帮 ...
- 前端开发不容错过的jQuery图片滑块插件(转)
作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQu ...
- html 可编辑表格插件,基于Bootstrap的jquery可编辑表格插件Bootstable
插件描述:Bootstable是一款基于Bootstrap的jquery表格编辑插件.通过该jquery表格编辑插件,会自动为表格添加编辑和删除按钮,使表格可以动态编辑. 更新时间:2019-11-2 ...
- 自动滑动图片html5,9个精巧绚丽的jQuery图片滑块动画
本文作者html5tricks,转载请注明出处 jQuery图片滑块动画即 1.jQuery/ 这次我们要来分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特 ...
- jQuery(UI)常用插件
jQuery 官方网站:http://jquery.com/ 下载地址:http://jquery.com/download/ 插件地址: http://plugins.jquery.com/ 常用插 ...
最新文章
- java错误页面显示错误信息_Struts2在JSP页面中显示错误信息和提示信息的方法
- js中实现base64加密、解密
- C/C++新建注册表项实例
- 2017-2018-1 20155301 《信息安全系统设计基础》第十三周学习总结
- redis java驱动_java中通过配置文件的方式(Jedis驱动)使用Redis
- 水凝胶 静电纺丝_离子液体/水和静电纺丝条件对聚偏氟乙烯纳米纤维晶体结构的影响...
- 【吐血整理,建议收藏】B站上有哪些值得反复观看的Java视频教程?
- BlackBerry 黑莓 7230 7290 快捷键
- EMDLP:用于RNA甲基化位点预测的集成多尺度深度学习模型 论文解读
- Cadence Allegro如何复用设计参数?
- idea无法切换成中文
- 阜阳市计算机学校助学金申请书,计算机*学生助学金申请书
- 【已开源】Flutter 穿山甲广告插件的集成-FlutterAds
- Mac Safari 模拟 IE
- 深度之眼Pytorch打卡(十三):Pytorch全连接神经网络部件——线性层、非线性激活层与Dropout层(即全连接层、常用激活函数与失活 )
- 江礼坤:详解资源合作推广
- JSD2204-java基础复习
- 御坂坂的c++学习之路(4)
- 梦兴阁给我生活带来的改变
- gp-greenplum-vacuum-资源回收-AO表空间回收