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，如需转载请自行联系原作者