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

Wijmo 的巨大優勢之一就是，它們是非常流行的jQuery UI組件。這將意味著它們的基礎類庫具有很多支援者。具有眾多的支援者同時也意味著更多好用的工具。這些好用的工具之一就是很酷的jsFiddle，這是一個即時的HTML/CSS/JavaScript snippet編輯器。用它來以一種迅速的無開銷的方式測試一些小東西是相當棒的。事實上，我們可以用它來即時的測試一些wijmo組件，這裡我們會看到如何做到這一點。因為Wijmo gauges使用到了基於瀏覽器能力的SVG或者VML，這些是“無外掛程式網頁”的一個重要的部分正在被iOS行動裝置上的Safari和Windows8中間的Metro IE大力推廣），也是我們可以這樣擺弄他們的原因。

如果你正在建立一個ASP.NET MVC 應用程式， Wijmo Complete包含在Studio for ASP.NET Wijmo的MVC Tools 。如果你正在使用一種不同的技術比如說Ruby或者PHP），你可以直接去Wijmo 網站尋找非.NET的套件包。無論哪種方式，我們在本篇部落格中，我們將引用CDN連結上的Wijmo網站 http://wijmo.com/downloads/。

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

第一步：選擇架構

開啟jsFiddle.net，在左側的下拉式清單中選擇jQuery 1.7.1。稍等片刻等待關聯的架構出現，之後勾選上jQuery UI 1.8.16。它應當看起來像下面這個樣子：

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/133134H92-0.png" width="244" height="284" />

 

第二步：添加對Wijmo的引用

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

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

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/133134N24-1.png" width="232" height="180" />

 

第三步：添加HTML和JavaScript

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

使得你的HTML窗格看起來像下面這樣點擊查看放大結果）：

?650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/133134G55-2.png" width="571" height="230" />

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

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/1331344045-3.png" width="566" height="111" />

 

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

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/1331342637-4.png" width="308" height="233" />

 

第四步：變得更花哨！

酷！我們現在可以快速的測試這個儀錶不同的樣式和屬性。這個儀錶可以顯示成任何東西，從溫度到速度表到轉速表再到訂單完成率。讓我們假設我們是一個小型的倉庫，我們每周有兩個層級的獎金目標-完成80個訂單是第一級獎金目標，而完成90個訂單是第二級獎金目標。這樣，倉庫的工作人員可以追蹤他們的進展，我們將添加一些彩色的範圍並且擴大儀錶盤顯示的值的範圍，同時在加上其他的一些樣式選項。這些選項將全部列舉在http://wijmo.com/wiki/index.php/RadialGauge.文檔中。請注意“ranges”是一個數組，這是因為每一個儀錶可以擁有不止一個範圍設定。

要小小的改動一下樣式，我們決定擴充範圍，稍稍的旋轉一下儀錶，並且添加我們自訂的兩個範圍。和其它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"}}, 
  
 
  
{ 
  
 
  
start 25, 
  
 
  
end 25, 
  
 
  
startValue: 90, 
  
 
  
endValue: 100, 
  
 
  
startDistance: 0.84, 
  
 
  
endDistance: 0.84, 
  
 
  
style: { 
  
 
  
fill: "#FF0000", 
  
 
  
stroke: "#FF0000", 
  
 
  
"stroke-width": "0"} 
  
 
  
}] 
  
 
  
} 
  
 
  
); 
 

現在我們的儀錶看起來像下面的圖片。它簡單易讀，和諧並且向倉庫人員提供明確的目標。

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/1331341a7-5.png" width="308" height="301" />

 

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

 

 

  
$("#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"}}, 
  
 
  
{ 
  
 
  
start 25, 
  
 
  
end 25, 
  
 
  
startValue: 90, 
  
 
  
endValue: 100, 
  
 
  
startDistance: 0.84, 
  
 
  
endDistance: 0.84, 
  
 
  
style: { 
  
 
  
fill: "#FF0000", 
  
 
  
stroke: "#FF0000", 
  
 
  
"stroke-width": "0"} 
  
 
  
}, 
  
 
  
{ 
  
 
  
start 1, 
  
 
  
end 25, 
  
 
  
startValue: 65, 
  
 
  
endValue: 80, 
  
 
  
startDistance: 0.98, 
  
 
  
endDistance: 0.84, 
  
 
  
style: { 
  
 
  
fill: "#008000", 
  
 
  
stroke: "#008000", 
  
 
  
"stroke-width": "0"} 
  
 
  
}] 
  
 
  
} 
  
 
  
); 
 

 

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

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/133134CT-6.png" width="308" height="304" />

 

第五步：手機測試

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

 

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

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131228/133134O35-7.png" width="308" height="233" />

第六步：製作一個真正的應用程式

因為這隻是純粹的用戶端代碼，儀錶的值可以簡單的通過向其提供一個新的值改變。你可能會希望包含一個更新倉庫管理系統的值的一個小功能。僅僅作為一個簡單的例子，我們將等待三秒鐘，然後將其值修改為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窗格的內容放置到頁面的<body>，同時 將JavaScript的內容放置在script標籤之間通常會放置在$(‘document’).ready()塊的內部）。

我建立了一個簡單的HTML頁面以示範這樣如何工作： Download Wijgauge HTML sample。

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

 

總結

今天我們在這裡做了幾件事情。首先，我們看到了jsFiddle是如何不錯地快速構建和測試用戶端代碼。其次，我們已經認識到使用Wijmo gauges是多麼的容易。你可以在這裡觀看這個sample的最終版本http://jsfiddle.net/rjdudley/TgNZX/9/，但是希望你已經建立起來自己的程式。

 

向jsFiddle team致以誠摯的感謝！

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

 

Wijmo下載，請進入Studio for ASP.NET Wijmo 2012 v1正式發布2012.03.22更新）!

本文出自 “葡萄城控制項部落格” 部落格，請務必保留此出處http://powertoolsteam.blog.51cto.com/2369428/839415