使用和造型HTML5儀表[指南]

昵稱1591629 2015-08-04

展開全文

如果你熟悉的HTML進度條，其中顯示有多少活動已經(jīng)完成,，你會發(fā)現(xiàn),，電表元素是相似的 - 都顯示當(dāng)前值超出最大值,。HTML5教程儀表但不同的是進度條,，儀表桿不被使用,，以顯示進度,。它用于顯示在特定范圍內(nèi)的靜態(tài)值,，例如可以表示在磁盤存儲中使用的存儲空間通過顯示多少存儲空間被填充多少不是。

最重要的是,，電表元件也可以被用于可視化至其范圍內(nèi)三個區(qū)域,。重用存儲空間例如，而不是只顯示有多少空間被占用了,，你也可以直觀地表明是否占用空間只有稀疏填充（可以說低于30％）,，或近一半（30至60％）或以上半滿使用不同colors.This（60％以上）可以幫助用戶知道當(dāng)他們到達存儲限制。

在這篇文章中,，我們將向你展示如何風(fēng)格的米欄提到的,，即一個簡單的儀器（沒有標(biāo)明區(qū)）兩種用途和儀表用3色顯示區(qū)域的兩個例子。對于后者,，我們將oncreating一個“標(biāo)志”計用于顯示較差,，平均和不錯的成績，而“pH值”為壓力表顯示酸性,，神經(jīng)和堿性pH值,。

屬性

在我們開始之前與實例，去深入,，讓我們快速瀏覽一下在下面的屬性的名單,，詳細了解這些屬性，如它們的默認值等將覆蓋中的示例,。

value – 電表元件的值
min –儀表的范圍的最小值
max – 儀表的范圍的最大值
low – 表示低邊界值
high – 表明高邊界值
optimum – 該范圍中的最佳點

1.造型一個簡單的計

下面是使用只有一個屬性,，值一個非常簡單的例子。在我們開始之前,，我們需要知道三件事第一：

（1）有一個默認的最小和最大值限定米的范圍內(nèi),，這分別是0和1。
（2）如果用戶指定的值沒有落在米范圍內(nèi),，將采取的任一最小或最大的值,，取它最接近。
（3）結(jié)束標(biāo)記是強制性的,。

下面是語法：

另外,，我們還可以添加min和max屬性從而提供用戶定義的范圍如下所示：

2。造型的“標(biāo)志”設(shè)計

首先，我們需要劃分的范圍分成三個區(qū)域（左/低,，中,，右/高）。這是被低和高的屬性開始發(fā)揮作用,。這是怎樣的三個區(qū)域劃分,。

這三個區(qū)域分，低,，低及高,，高和最高之間形成。

現(xiàn)在很明顯,，在某些條件下低值和高值應(yīng)該遵循要形成的三個區(qū)域：

低不能比及高最大小于分鐘,，更大
高不能大于最大值和小于低速＆分鐘。
當(dāng)一個標(biāo)準被打破低和高將在其他變量的值,，其中很不滿意，也就是說,，如果低價值發(fā)現(xiàn)超過min時,，它不應(yīng)該是標(biāo)準，低將得到最小值,。

在這個例子中,，我們會考慮我們的三個區(qū)域，從左至右為：

較差的: (0-33)
平均: (34-60)
良好: (61-100)

因此,，以下是該屬性的值;min="0" low="34" high="60" max="100".

這里是一個圖像可視化的區(qū)域,。

即使有三個區(qū)域中，我們創(chuàng)建剛才儀,，它會顯示只有兩個在只有兩種顏色區(qū)域的“種”的時刻,。為什么呢？因為最佳是在中間區(qū)域,。

最佳點

在任何區(qū)域（三）的最佳點落在中,，它被認為是著色的綠色默認的“最佳區(qū)域”。該（多個）區(qū)域緊鄰它被稱為“亞最佳區(qū)域”,，它是橙色,。一個最遠的是一個“ - 一個最優(yōu)的未多區(qū)域”，紅色,。

到目前為止,，在我們的例子中，我們還沒有賦值最佳,。因此,，缺省值變?yōu)?0，使得中間區(qū)域的“最佳區(qū)域”和那些它旁邊（均在左側(cè)和右側(cè)）作為“亞最佳區(qū)域”,。

總之,，在上述情況下,，落入中間區(qū)域的任何值到電表元件由綠色指示;其余的橙色。

這不是我們想要的,。我們希望它有色這樣：差（紅色）,，平均（橙色），良好（綠色）

由于右側(cè)區(qū)域是需要考慮我們的最佳區(qū)域,，我們將giveoptimum值就會落入右側(cè)區(qū)域（任意值61-100之間,，包括61和100）。

我們正在為90這個例子,。這將使得該右區(qū)域“最優(yōu)”,，中間（其直接下一個區(qū)域）“次優(yōu)”和最左邊“，一個最優(yōu)的未備受”的區(qū)域,。

這就是我們會得到我們的標(biāo)尺,。

2。造型“pH值”計

在我們開始我們的最后一個例子,，請大家注意這一點的CSS樣式用戶代理依賴和實驗,。

首先，在pH值下喘息,。酸性溶液的pH小于7,，堿性溶液的pH值大于7的，如果你的土地上7,，這是一個中性溶液,。

因此，我們將使用下列值和屬性：

low="7" , high="7", max="14", 和最小將采取的缺省值零,。

在我們添加了其他屬性來完成的代碼,，讓我們決定顏色：酸性（紅色），中性（白色）和堿性（藍色）,。讓我們也考慮酸性區(qū)域（左區(qū)域低于7）為“最佳”

下面是CSS偽元素我們將針對以獲得所需的視覺infirefox,。（對于WebKit的儀表偽元素和更多的，請參閱“參考”列出的鏈接,。）

.ph_meter {
    background: lightgrey;
    width: 300px;
}
.ph_meter:-moz-meter-optimum::-moz-meter-bar {
    background:indianred;
}
.ph_meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: antiquewhite;
}
.ph_meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: steelblue;
}

下面是完整的html5教程代碼,，將pH計的最終結(jié)果。