温度计样式
来源:互联网 发布:pxcook像素大厨 mac 编辑:程序博客网 时间:2024/04/30 08:23
jquery-tempgauge是一款基于HTML5 的jQuery温度计插件。使用该插件可以生成温度计的外观样式,并将指定的温度度数转换为温度计的颜色刻度。
使用方法
使用该温度计插件需要引入jQuery和jquery.tempgauge.js文件。
<script src="js/jquery-2.1.1.min.js"></script><script src="js/jquery.tempgauge.js"></script>
HTML
该温度计的HTML结构非常简单:使用一个< div >元素来包裹需要转换的温度文本。
<div class="tempgauge0">-20°C</div> <div class="tempgauge1">-10°C</div> <div class="tempgauge2">10°C</div> <div class="tempgauge3">30°C</div> <div class="tempgauge4">33.5°C</div>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该温度计插件。
$(".tempgauge0").tempGauge({ width:55, borderWidth: 3, showLabel: false, borderColor: "#3c8dbc" }); $(".tempgauge1").tempGauge({ width:65, borderWidth: 3, showLabel: false, borderColor: "#3c8dbc" }); $(".tempgauge2").tempGauge({ width:75, borderWidth: 3, showLabel: false, borderColor: "#3c8dbc" }); $(".tempgauge3").tempGauge({ width:85, borderWidth: 3, showLabel: false, borderColor: "#3c8dbc" ,fillColor:"green",}); $(".tempgauge4").tempGauge({ width:95, borderWidth: 4, showLabel: false, borderColor: "#3c8dbc",fillColor:"green", });
配置参数
该温度计插件的可用配置参数有:
borderColor:温度计边框颜色,默认值为black。
borderWidth:温度计的边框宽度,默认值为4。
defaultTemp:默认的温度值,默认值为26。
fillColor:填充颜色,默认值为red。
labelSize:标签文字的大小,默认值为12。
maxTemp:最大温度值,默认值为100。
minTemp:最小温度值,默认值为40。
showLabel:是否显示温度标签,默认值为false。
width:画布的宽度,默认值为100。
效果图
阅读全文
0 0
- 温度计样式
- 温度计式的时间进度(前端样式)
- USB温度计
- 时钟温度计
- 单片机 温度计
- 温度计式样的时间
- 数字时钟语音温度计
- 数字时钟语音温度计
- DS18B20数字温度计使用
- jfreechart做温度计
- 带温度计的杯子
- Draw2d 温度计例子
- 温度计(LCD显示)
- ad590温度计的毕业论文
- DS18B20数字温度计
- DS18B20 与数字温度计
- 自定义View之温度计
- android:自定义温度计View
- Oracle Cursor的使用
- datagridview显示和保存下拉框中数据
- Asp.net 访问页面跳转到登录后再跳转到原来的页面
- R语言连接mysql
- 每隔一小时生成一个新的日志文件,当寄存器状态发生变化记录一次
- 温度计样式
- SAAS技术交流系列(一)
- mysql5.7 主从配置
- Android 之路4---Java简介
- C++读取BMP位图数据的方法
- 树状数组习题:棋子等级
- Android定时广播和定时服务两种实现方式
- C# 浅谈ThreadPool -- 上篇(Enqueue)
- Linux Git常见命令