Wijmo 更优美的jQuery UI部件集：通过jsFiddle测试Wijmo Gauges
如果你正在建立一个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。它应当看起来像下面这个样子：
第二步：添加对Wijmo的引用
紧挨着选择框架的位置时添加资源。这里我们需要添加对Wijmo的引用。 jQuery 以及 jQuery UI已经被处理过了，所以我们只需要添加主题，Wijmo样式表以及到Wijmo库的引用。所有我们需要知道的是库的URL。jsFiddle将会处理关系和类型。只需要将URL粘贴到文本框，之后点击巨大的加号按钮。添加的顺序很重要，链接将按照你添加的顺序自上而下的添加。依照Wijmo CDN文档中显示的顺序就不会出什么问题。
最终的结果应当是这个样子的：
第三步：添加HTML和JavaScript
为了快速上手，你可以从我们的Wijmo Explorer中间拷贝示例，或者使用Quick Start中提供的示例代码。这里我们从最基本的仪表盘代码开始，然后逐步的建立一些样式。
使得你的HTML窗格看起来像下面这样（点击查看放大结果）：
然后向JavaScript窗格中添加以下JavaScript代码：
现在，单击顶部的运行按钮，你会看到一个非常基本的仪表出现在结果窗格中！
第四步：变得更花哨！
酷！我们现在可以快速的测试这个仪表不同的样式和属性。这个仪表可以显示成任何东西，从温度到速度表到转速表再到订单完成率。让我们假设我们是一个小型的仓库，我们每周有两个级别的奖金目标-完成80个订单是第一级奖金目标，而完成90个订单是第二级奖金目标。这样，仓库的工作人员可以追踪他们的进展，我们将添加一些彩色的范围并且扩大仪表盘显示的值的范围，同时在加上其他的一些样式选项。这些选项将全部列举在http://wijmo.com/wiki/index.php/RadialGauge.文档中。请注意“ranges”是一个数组，这是因为每一个仪表可以拥有不止一个范围设定。
要小小的改动一下样式，我们决定扩展范围，稍稍的旋转一下仪表，并且添加我们自定义的两个范围。和其它Wijmo仪表所有的功能类似（以及任何通用的Wijmo部件），选项可以通过属性数组很容易的被设置。将现有的JavaScript代码替换成以下代码片断（提示：在粘贴之后，在顶部菜单中找到TidyUp按钮并且单击，可以解决缩进问题）：
$("#gauge").wijradialgauge({
value: 60,
max: 120,
startAngle: -33,
sweepAngle: 240,
width: 400,
height: 400,
ranges: [{
startWidth: 25,
endWidth: 25,
startValue: 80,
endValue: 90,
startDistance: 0.84,
endDistance: 0.84,
style: {
fill: "#FFFF00",
stroke: "#FFFF00",
"stroke-width": "0"}},
{
startWidth: 25,
endWidth: 25,
startValue: 90,
endValue: 100,
startDistance: 0.84,
endDistance: 0.84,
style: {
fill: "#FF0000",
stroke: "#FF0000",
"stroke-width": "0"}
}]
}
);现在我们的仪表看起来像下面的图片。它简单易读，和谐并且向仓库人员提供明确的目标。
到目前为止还不错，但我们可以在添加一点点微调，以提示它们何时已经接近目标。让我们添加一个从65到80的锥形范围，目的是在他们接近目标时，激发工作的热情。将你的JavaScript窗格中的内容替换为以下代码：
1 $("#gauge").wijradialgauge({
2 value: 60,
3 max: 120,
4 startAngle: -33,
5 sweepAngle: 240,
6 width: 400,
7 height: 400,
8 ranges: [{
9 startWidth: 25,
10 endWidth: 25,
11 startValue: 80,
12 endValue: 90,
13 startDistance: 0.84,
14 endDistance: 0.84,
15 style: {
16 fill: "#FFFF00",
17 stroke: "#FFFF00",
18 "stroke-width": "0"}},
19 {
20 startWidth: 25,
21 endWidth: 25,
22 startValue: 90,
23 endValue: 100,
24 startDistance: 0.84,
25 endDistance: 0.84,
26 style: {
27 fill: "#FF0000",
28 stroke: "#FF0000",
29 "stroke-width": "0"}
30 },
31 {
32 startWidth: 1,
33 endWidth: 25,
34 startValue: 65,
35 endValue: 80,
36 startDistance: 0.98,
37 endDistance: 0.84,
38 style: {
39 fill: "#008000",
40 stroke: "#008000",
41 "stroke-width": "0"}
42 }]
43 }
44 );之后我们的仪表就显示成下面这个样子：
第五步：手机测试
因为所有这一切都是在浏览器内部代码和图形渲染得支持下完成，你可以在iPad或者其他移动设备上运行jsFiddle。下面的截图就是在我的iPad上运行的结果：
不错，在机场的候机时间变得更有成效！
第六步：制作一个真正的应用程序
因为这只是纯粹的客户端代码，仪表的值可以简单的通过向其提供一个新的值改变。你可能会希望包含一个更新仓库管理系统的值的一个小功能。仅仅作为一个简单的例子，我们将等待三秒钟，然后将其值修改为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页面以演示这样如何工作：
-
- 4wijgauge.zip ( 829 Bytes, 下载次数:84)
你可以直接在浏览器或者在任何你喜欢的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更新）!
转载于:https://www.cnblogs.com/C1SupportTeam/archive/2012/09/05/2671472.html
Wijmo 更优美的jQuery UI部件集：通过jsFiddle测试Wijmo Gauges相关推荐
- Wijmo 更优美的jQuery UI部件集：爱上 ThemeRoller
Wijmo 是一个基于jQuery UI的UI部件的套件.Wijmo最方便使用的特点之一就是兼容ThemeRoller.ThemeRoller 是一个创建独特的jQuery UI web 部件主题皮肤 ...
- Wijmo 更优美的jQuery UI部件集：复合图表(CompositeChart)
Wijmo的CompositeChart控件允许您使用一个Chart来分析和展现复杂的数据.相同的数据可以使用不同的可视化效果,不同的图表类型展现在一个图表内,使得用户可以从不同的角度,了解分析这组数 ...
- Wijmo 更优美的jQuery UI部件集：活动日历控件(Event Calendar)
Wijmo Event Calendar活动日历控件,是一个功能齐全的活动日历控件,允许用户添加,编辑和管理他们的日程.默认情况下,控件将使用Html5的Local Storage特性,进行离线数据存 ...
- Wijmo 更优美的jQuery UI部件集：在安全站点使用Wijmo控件
通常我们总会遇到这样的问题,在安全站点(HTTPS)中使用C1Wijmo控件时,用户可能会收到脚本错误. 发生这种状况的是由于我们的CDN链接不是https链接. 解决HTTPS 的错误 为了解决上述 ...
- Wijmo 更优美的jQuery UI部件集：运行时处理Wijmo GridView数据操作
2019独角兽企业重金招聘Python工程师标准>>> C1GridView具有很多内置的功能,比如排序,过滤,分页以及分组. 对于开发者来说,这些都是很有用的功能,因为它们可以节省 ...
- Wijmo 更优美的jQuery UI部件集：客户端更改C1GridView数据源
很多时候,我们在使用 GridView 展示数据时,希望最终用户可以编辑数据并且同步到数据源中.这是一项繁琐的工作.我们需要自定义模板列,并且在后台手动获取更新值,最后使用 SQL 语句同步到数据库中 ...
- jQuery 使用 jQuery UI 部件工厂编写带状态的插件（翻译）
首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...
- jQuery UI框架
1.jQuery的界面插件Ninja UI Ninja UI,是一款界面插件,使用它将能给你的项目增色不少.此插件包含有幻灯,智能提示等常见的效果. 目前的文档还不是很全,但是官方提供的例子已经很详细 ...
- 18款 jQuery UI框架
1.jQuery的界面插件 Ninja UI Query 是一个非常优秀的 JavaScript 框架,而且还有相当多的插件.其中的一些UI插件也相当的给力,比如 Ninja UI,是一款界面插件,使 ...
最新文章
- java_web学习(8)会话与状态管
- 【采用-决策引擎】一文看懂风控决策引擎搭建思路
- 【Linux】【服务器】 CentOS7下关机和重启命令
- request请求和response响应时的乱码解决代码
- NGINX前端代理TOMCAT取真实客户端IP
- 01 辅助函数之加密函数
- Windows 下安装 laravel框架
- linux下hba卡服务,在Linux下查看FC HBA卡的速率和状态
- 190221每日一句
- QML Math详解 生成随机数
- 谷歌自动启动flash
- linux安装ps2键盘驱动程序,VoodooPS2Controller v1.8.25 黑苹果键盘鼠标触摸板万能驱动 _ 黑苹果乐园...
- 新版 OPPO Enco Free 2 固件工具 （仅供交流学习使用）
- emacs快捷键总结
- 纯小白Python爬取东方财富网研报内容并通过机器学习的SVM模型进行文本分析（四）
- 保护个人隐私，你需要这样设置 iPhone 的语音备忘录，禁用位置命名
- QIIME2进阶五_QIIME2扩增子基因序列多样性分析
- 【MySQL】MySQL抖动
- 魅族手机便签的备忘录内容误删了怎么办？
- 让线程按顺序执行8种方法（转载）