温度计样式

来源：互联网发布：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