Wijmo 更優美的jQuery UI部件集：通過jsFiddle測試Wijmo Gauges

在這篇文章中，我們将使用到儀表部件。讓我們切入今的正題吧！

<b>第一步：選擇架構</b>

<a href="http://powertoolsteam.blog.51cto.com/attachment/201204/20/2369428_1334894858ckE4.png"></a>

<b>第二步：添加對</b><b>Wijmo</b><b>的引用</b>

緊挨着選擇架構的位置時添加資源。這裡我們需要添加對Wijmo的引用。 jQuery 以及 jQuery UI已經被處理過了，是以我們隻需要添加主題，Wijmo樣式表以及到Wijmo庫的引用。所有我們需要知道的是庫的URL。jsFiddle将會處理關系和類型。隻需要将URL粘貼到文本框，之後點選巨大的加号按鈕。添加的順序很重要，連結将按照你添加的順序自上而下的添加。依照Wijmo CDN文檔中顯示的順序就不會出什麼問題。

最終的結果應當是這個樣子的：

<a href="http://powertoolsteam.blog.51cto.com/attachment/201204/20/2369428_1334894859kyBI.png"></a>

<b>第三步：添加</b><b>HTML</b><b>和</b><b>JavaScript</b>

為了快速上手，你可以從我們的Wijmo Explorer中間拷貝示例，或者使用Quick Start中提供的示例代碼。這裡我們從最基本的儀表盤代碼開始，然後逐漸的建立一些樣式。

使得你的HTML窗格看起來像下面這樣（點選檢視放大結果）：

然後向JavaScript窗格中添加以下JavaScript代碼：

<a href="http://powertoolsteam.blog.51cto.com/attachment/201204/20/2369428_1334894861WvZZ.png"></a>

現在，單擊頂部的運作按鈕，你會看到一個非常基本的儀表出現在結果窗格中！

<a href="http://powertoolsteam.blog.51cto.com/attachment/201204/20/2369428_1334894863qvSn.png"></a>

<b>第四步：變得更花哨！</b>

要小小的改動一下樣式，我們決定擴充範圍，稍稍的旋轉一下儀表，并且添加我們自定義的兩個範圍。和其它Wijmo儀表所有的功能類似（以及任何通用的Wijmo部件），選項可以通過屬性數組很容易的被設定。将現有的JavaScript代碼替換成以下代碼片斷（提示：在粘貼之後，在頂部菜單中找到TidyUp按鈕并且單擊，可以解決縮進問題）：

$("#gauge").wijradialgauge({ 

value: 60, 

max: 120, 

startAngle: -33, 

sweepAngle: 240, 

400, 

height: 400, 

ranges: [{ 

start 25, 

end 25, 

startValue: 80, 

endValue: 90, 

startDistance: 0.84, 

endDistance: 0.84, 

style: { 

fill: "#FFFF00", 

stroke: "#FFFF00", 

"stroke-width": "0"}}, 

{ 

startValue: 90, 

endValue: 100, 

fill: "#FF0000", 

stroke: "#FF0000", 

"stroke-width": "0"} 

}] 

} 

); 

現在我們的儀表看起來像下面的圖檔。它簡單易讀，和諧并且向倉庫人員提供明确的目标。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201204/20/2369428_1334894864Jofa.png"></a>

到目前為止還不錯，但我們可以在添加一點點微調，以提示它們何時已經接近目标。讓我們添加一個從65到80的錐形範圍，目的是在他們接近目标時，激發工作的熱情。将你的JavaScript窗格中的内容替換為以下代碼：

}, 

start 1, 

startValue: 65, 

endValue: 80, 

startDistance: 0.98, 

fill: "#008000", 

stroke: "#008000", 

之後我們的儀表就顯示成下面這個樣子：

<a href="http://powertoolsteam.blog.51cto.com/attachment/201204/20/2369428_13348948663zKd.png"></a>

<b>第五步：手機測試</b>

因為所有這一切都是在浏覽器内部代碼和圖形渲染得支援下完成，你可以在iPad或者其他移動裝置上運作jsFiddle。下面的截圖就是在我的iPad上運作的結果：

不錯，在機場的候機時間變得更有成效！

<a href="http://powertoolsteam.blog.51cto.com/attachment/201204/20/2369428_1334894867KgIP.png"></a>

<b>第六步：制作一個真正的應用程式</b>

因為這隻是純粹的用戶端代碼，儀表的值可以簡單的通過向其提供一個新的值改變。你可能會希望包含一個更新倉庫管理系統的值的一個小功能。僅僅作為一個簡單的例子，我們将等待三秒鐘，然後将其值修改為78（倉庫越來越接近他們的獎金！）。

向JavaScript窗格的最低部添加以下代碼，位于儀表函數之外：

window.setTimeout(function() { 

$("#gauge").wijradialgauge("option", "value", 78);},5000); 

window.setTimeout(function() {$("#gauge").wijradialgauge("option", "value", 78);},3000); 

現在，在儀表呈現出來三秒鐘後，該值将更新為78。這很容易！

所有我們通過jsFiddle建構的代碼可以直接複制到一個HTML頁面，直接就可以工作。但是别忘記添加引用！将jsFiddle HTML窗格的内容放置到頁面的&lt;body&gt;，同時 将JavaScript的内容放置在script标簽之間（通常會放置在$(‘document’).ready()塊的内部）。

你可以直接在浏覽器或者在任何你喜歡的HTML編輯器打開這個檔案 。

<b>總結</b>

<b>向</b><b>jsFiddle team</b><b>緻以誠摯的感謝！</b>

我想向jsFiddle team送上一個巨大的“謝謝”，因為他們創造了這樣一個很酷的工具！那麼的簡單，優雅，正是我們在許多情況下需要的。

本文轉自 powertoolsteam 51CTO部落格，原文連結：http://blog.51cto.com/powertoolsteam/839415，如需轉載請自行聯系原作者