Wijmo-UI-构建指南-全-

Wijmo UI 构建指南（全）

原文：zh.annas-archive.org/md5/9671538d42ded8fad162c969b78c8975

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

Wijmo 是一个专注于用户界面小部件的新 JavaScript 库。它建立在 jQuery UI 的基础上，增强了现有小部件，并添加了新的小部件。在这本书中，我们探讨了对于 Web 开发至关重要的 Wijmo 小部件。涵盖了 15 个小部件的有用配置选项及其使用场景。每当你在 Web 开发中遇到之前实现过的组件或小部件时，Wijmo 小部件很可能已经为你提供了解决方案。本书中的章节旨在让你能够迅速开始使用这些小部件。另一方面，第六章，使用 Wijmo Grid 的仪表板，在构建应用程序和解释其工作原理方面采取了不同的方法。

如果你熟悉 Wijmo，就没有必要按照章节顺序阅读。然而，如果你是第一次体验 Wijmo，我建议你按照章节的顺序进行。

这本书涵盖什么

第一章，Wijmo 入门，介绍了 Wijmo、安装步骤和许可。

第二章，对话框小部件，解释了可以添加到 jQuery UI 对话框小部件中的 Wijmo 功能。

第三章，表单组件，探讨了 Wijmo 表单小部件。

第四章，处理图像，展示了画廊、相册和旋转木马小部件的常见用途。

第五章，高级小部件，涵盖了提示、上传、视频和编辑器小部件。

第六章，使用 Wijmo Grid 的仪表板，构建了一个结合 Knockout 和 Wijmo 的交互式应用程序。

第七章，Wijmo 移动，设置了移动开发环境并介绍了移动视图。

第八章，扩展 Wijmo，解释了如何修改小部件和更改主题。

你需要这本书什么

你需要一个具有 JavaScript、CSS 和 HTML 语法高亮的文本编辑器。Windows 上的 Notepad++或 Mac 上的 Textmate 就足够了。使用 Wijmo 进行开发不需要花哨的编辑器功能，如自动完成或 JavaScript 的警告。小部件简单易用。

除了文本编辑器，你还需要一个网络浏览器。Wijmo 支持版本高于 5 的 Internet Explorer、Firefox、Safari 或 Chrome。你可能已经安装了其中之一，并且可能更倾向于使用其中一个。

这本书面向谁

本书的主要读者是那些在项目中需要使用现成小部件的网页开发者。jQuery UI 缺少必要的组件或功能，而 Wijmo 提供了免费的开源小部件，以及更复杂小部件的授权选项。由于本书涵盖了这两个领域，从事开源项目开发的开发者也能从中受益。

由于 Wijmo 使用简单，许多简单示例都可以由 JavaScript 初学者理解。当满足先前条件时，这本书是 JavaScript 初学者在学会 jQuery 之后应该阅读的第一本书。学习如何使用 Wijmo 小部件将减少编写自定义 JavaScript 的不必要工作。

习惯用法

在本书中，您将找到许多不同风格的文本，以区分不同类型的信息。以下是一些这些样式的示例及其含义的解释。

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 用户名如下所示：“widget 方法返回对话框 HTML 元素。”

代码块设置如下：

$("#dialog").wijdialog({captionButtons: {
  pin: { visible: false },
  refresh: { visible: false },
  toggle: { visible: false },
  minimize: { visible: false },
  maximize: { visible: false }
  }
});

当我们希望将您的注意力引到代码块的一个特定部分时，相关的行或项目将以粗体显示：

maximize: {visible: true, click: function () {
  alert('To enlarge text, click the zoom icon.')
}, iconClassOn: 'ui-icon-lightbulb'},
close: {visible: true, click: self.close, iconClassOn:'ui-icon-close'}

新术语和重要词汇以粗体显示。您在屏幕上、菜单或对话框中看到的单词，例如，在文本中显示如下：“点击下一步按钮将您带到下一屏幕”。

注意

警告或重要注意事项以如下方式显示在框中。

小贴士

小贴士和技巧看起来像这样。

读者反馈

我们读者提供的反馈总是受欢迎的。请告诉我们您对这本书的看法——您喜欢什么或可能不喜欢什么。读者反馈对我们开发您真正能从中获得最大收益的标题非常重要。

要向我们发送一般反馈，只需发送电子邮件到 <feedback@packtpub.com>，并在邮件主题中提及书名。

如果您在某个主题上具有专业知识，并且您对撰写或为书籍做出贡献感兴趣，请参阅我们在 www.packtpub.com/authors 上的作者指南。

客户支持

现在您已经是 Packt 书籍的骄傲拥有者，我们有一些事情可以帮助您从您的购买中获得最大收益。

下载示例代码

您可以从您在 www.packtpub.com 的账户下载您购买的所有 Packt 书籍的示例代码文件。如果您在其他地方购买了这本书，您可以访问 www.packtpub.com/support 并注册，以便将文件直接通过电子邮件发送给您。

错误更正

尽管我们已经尽最大努力确保内容的准确性，错误仍然可能发生。如果您在我们的某本书中发现错误——可能是文本或代码中的错误——如果您能向我们报告这一点，我们将不胜感激。通过这样做，您可以避免其他读者感到沮丧，并帮助我们改进本书的后续版本。如果您发现任何勘误，请通过访问www.packtpub.com/submit-errata，选择您的书籍，点击勘误提交表单链接，并输入您的勘误详情来报告它们。一旦您的勘误得到验证，您的提交将被接受，勘误将被上传到我们的网站，或添加到该标题的勘误部分下的现有勘误列表中。您可以通过从www.packtpub.com/support选择您的标题来查看任何现有的勘误。

盗版

互联网上版权材料的盗版是一个持续存在的问题，涉及所有媒体。在 Packt，我们非常重视保护我们的版权和许可证。如果您在互联网上发现我们作品的任何非法副本，无论形式如何，请立即提供位置地址或网站名称，以便我们可以寻求补救措施。

请通过<copyright@packtpub.com>与我们联系，并提供疑似盗版材料的链接。

我们感谢您在保护我们的作者和我们为您提供有价值内容的能力方面的帮助。

问题

如果您在本书的任何方面遇到问题，可以通过<questions@packtpub.com>联系我们，我们将尽力解决。

第一章. 使用 Wijmo 入门

Wijmo 由超过 40 个用户界面小部件组成，从表单组件到企业图表都有。所有的小部件都附带主题。Wijmo 最好的特性包括：

• Wijmo 使用简单。它是一个包含广泛配置选项的完整小部件集。很可能 Wijmo 有一个小部件可以满足你在项目中使用的每个 UI 组件。

• 它处理了浏览器之间的实现差异。从版本 6 开始的所有 IE 版本和其他浏览器都得到支持。

• 它提供铂金级支持。尽管现场电话支持需要年度费用，但你的团队在使用 Wijmo 的时候永远不会陷入困境或遇到停机时间。

• 它是开源的，并且托管在 GitHub 上的一个仓库中，拥有开源应用程序的 GPL 许可。

并非所有事物都是完美的。Wijmo 也存在其粗糙的边缘。在这本书中，我指出了其中的陷阱并引导你绕过它们。从这本书中学习的益处在于你不会犯我犯过的错误。学习 Wijmo 使得网页开发变得更加简单、快捷和有趣。

设置 Wijmo

与 jQuery UI 相比，下载和安装 Wijmo 只需要多几个步骤。它有一个内容分发网络上的文件，可以快速开始。对于这本书，建议下载并设置开发所需的文件。由于 Wijmo 是基于 jQuery UI 构建的，所以我包括了获取和自定义 jQuery UI 的详细信息。本章还涵盖了如何在生产环境中安装精简文件。

通过 CDN 快速安装 Wijmo

jQuery 和 jQuery UI 都由 Google 和 Microsoft 在他们的 内容分发网络（CDNs）上托管。Microsoft 服务托管标准的 jQuery UI 主题以及 JavaScript。要使用 CDN，你需要首先找到你想要文件的 URL。Microsoft 在 asp.net/ajaxlibrary/cdn.ashx 页面上列出了他们托管的库。如果你点击目录下的 jQuery UI 版本，会列出几个版本。点击一个版本将显示精简版和常规版本的 URL。例如，jQuery UI 1.10.2 的以下 URL：

ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js

页面还有一个关于该版本所有主题的精美视觉画廊，每个主题下方都有 CSS 主题的 URL。Cupertino 的 URL 是：

ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/cupertino/jquery-ui.css

然而，鼓励读者从 Wijmo 的主题中选择一个，因为它们与库的兼容性更好。Wijmo 有一个主题探索器 (wijmo.com/demo/themes/)，展示了六个主题（截至版本 3.20131.1），如下面的截图所示：

火箭主题的 URL 是：

cdn.wijmo.com/themes/rocket/jquery-wijmo.css

Wijmo 为每个版本提供单独的 Widgets CSS。URL 的形式为：http://cdn.wijmo.com/jquery.wijmo-pro.all.[version].min.css。对于本书编写时的版本，形式为：cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.css。

Wijmo 的 JavaScript 文件遵循类似的格式：

• cdn.wijmo.com/jquery.wijmo-open.all.3.20131.1.min.js

• cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.js

要通过 CDN 使用 Wijmo，这些 URL 必须放置在脚本和链接元素中，如下所示：

<!DOCTYPE HTML>
<html>
<head>
  <title>Example</title>
  <!--jQuery References-->
  <script src="img/jquery-1.9.1.min.js" type="text/javascript"></script>
  <script src="img/jquery-ui.min.js" type="text/javascript"></script>
  <!--Wijmo Widgets JavaScript-->
  <script src= "http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.1.min.js" type="text/javascript"></script>
  <script src= "http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.js" type="text/javascript"></script>
  <!--Theme-->
  <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css"rel="stylesheet" type="text/css" />
  <!--Wijmo Widgets CSS-->
  <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.css"rel="stylesheet" type="text/css" />
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $('#dialog').wijdialog({
        autoOpen: true,
        captionButtons: {
          refresh: { visible: false }
        }
      });
    });
  </script>
</head>
<body>
  <div id="dialog" title="Basic dialog">
    <p>Meet Wijmo.</p>
  </div>
</body>
</html>

如果 Wijmo CDN 文件已正确添加，你应该会看到一个具有标准最小化、展开和关闭按钮的“窗口”，如下截图所示：

当浏览器加载 JavaScript 或 CSS 文件时，它们会检查文件是否在缓存中。如果用户已经在他的机器上有一个缓存的版本，那么浏览器将从缓存中加载而不是下载内容。通过 CDN 提供 jQuery 可能会减少用户的下载大小。然而，Wijmo 和 jQuery UI 库在 Web 开发中使用的频率较低，因此它们不太可能被缓存。与从 CDN 加载完整的库相比，如下一节所述，仅创建包含项目中使用的组件的自定义下载可以减少大小。因此，你的 Web 应用程序将加载得更快。

为开发安装 Wijmo

jQuery UI 有五个主要的功能区域。你可以创建一个只包含你 Web 应用程序所需功能的自定义下载，从而为浏览器下载生成更小的库。

为了避免使用 jQuery UI 主题的陷阱，建议完全避免在jqueryui.com上的 ThemeRoller。如果 Wijmo 配置了如 Redmond 之类的 jQuery UI 主题，截图中将显示一些怪异现象：

下载自定义的 jQuery UI

jQuery UI 下载页面jqueryui.com/download/允许您选择您项目所需的功能，以创建一组更小的文件供浏览器下载。这通常比使用 CDN 更好，因为 jQuery UI 每年都有许多版本发布，您的项目使用与浏览器已下载的相同版本的可能性很低。对于本书，请使用默认选项下载 jQuery UI 1.10.2。稍后，您可能希望取消选择不使用的功能，并查看您的项目是否仍然可以正常工作。

当自定义 jQuery UI 库时，依赖关系会为您整理好。当一个组件被启用时，其依赖关系会自动选择。当您最小化生产文件时，请记住，大多数效果以及一些交互和控件可能不是必需的。例如，在手风琴和对话框小部件中只使用了滑动效果。如果您的项目只使用这些小部件，那么其他效果就不必要了。

下载 Wijmo

首先，前往wijmo.com/downloads/并滚动到页面底部。右侧有一个导航面板，其中包含下载链接，如下截图所示：

这将加载下载页面，该页面包含将 Wijmo 包含到您的项目中的各种方法，以及底部的一个介绍性视频开始使用 Wijmo。点击免费试用按钮下载 Wijmo Professional。许可选项以及功能比较图表在本章末尾。点击免费试用按钮后，如果您是新用户，则需要注册一个账户。一旦您用新账户登录，您将看到一个下载库的链接，您将能够看到以下截图所示的屏幕：

您会注意到在Wijmo文件夹中有个别组件和功能的 JavaScript 和 CSS 文件。当您想要减小生产下载的大小的时候，它们可能会有所帮助。由于只能从网站下载 Wijmo 的当前版本，因此您可能想要保留下载的备份。

安装 jQuery UI 用于开发

在 jQuery UI 下载中，既有用于生产的压缩文件，也有用于开发的未压缩源代码。使用开发版本可以轻松调试，因为您不需要逐行查看压缩代码。为了设置您的开发环境，将文件js\jquery-ui-1.10.2.custom.js和js\jquery-1.9.1.js复制到lib文件夹中。

安装 Wijmo 用于开发

与 jQuery UI 下载类似，Wijmo 下载包含你开发和生产所需的所有文件。对于本书，我们将使用 Wijmo Professional 中的功能。Wijmo Professional 依赖于 Wijmo Open 中的组件。你需要将以下文件从 Wijmo 下载复制到lib文件夹中：

• js\jquery.wijmo-open.3.20131.2.all.js

• js\jquery.wijmo-pro.all.3.20131.2.js

• css\jquery.open.css

• css\jquery.wijmo-pro.3.20131.2.css

• css\images

• Themes\rocket\jquery-wijmo.css

• Themes\rocket\images

在复制主题图像时，合并文件夹内容。请注意，CSS 中的图像路径是相对的，只要你有与 CSS 文件相同的目录中的文件夹，它们就会正常工作。Wijmo Professional 文件包括已下载的发布版本的版本号。这些版本号会随着每个版本而变化，而图像和主题文件相对静态。截至 2013 年初，版本号为 3.20131.2。只需将其替换为本书其余部分的版本号，或者只需使用版本 3.20131.2。

将 Wijmo 添加到 HTML 文档中

剩下的就是将 Wijmo 添加到你的 HTML 文档中。你可以通过将script和link元素添加到lib文件夹中的文件来实现，如下所示：

<!DOCTYPE HTML>
<html>
<head>
  <title>Example</title>
  <!--jQuery References-->
  <script src="img/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="img/jquery-ui.custom.js" type="text/javascript"></script>
  <!--Wijmo Widgets JavaScript-->
  <script src="img/jquery.wijmo-open.3.20131.2.all.js" type="text/javascript"></script>
  <script src="img/jquery.wijmo-pro.all.3.20131.2.js" type="text/javascript"></script>
  <!--Theme-->
  <link href="../lib/jquery-wijmo.css" rel="stylesheet" type="text/css" />
  <!--Wijmo Widgets CSS-->
  <link href="../lib/jquery.wijmo-open.3.20131.2.css" rel="stylesheet" type="text/css" />
  <link href="../lib/jquery.wijmo-pro.3.20131.2.css" rel="stylesheet" type="text/css" />
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $('#dialog').wijdialog({
        autoOpen: true,
        captionButtons: {
          refresh: { visible: false }
        }
      });
    });
  </script>
</head>
<body>
  <div id="dialog" title="Basic dialog">
    <p>Click OK to close this window.</p>
  </div>
</body>
</html>

Wijmo 许可

Wijmo Open 受 MIT 和 GPL 的双重许可。MIT 许可证允许你以任何方式使用软件，只要保留版权归属。Wijmo Open 是 jQuery UI 的扩展，具有更多小部件和选项。Wijmo Open 中包含但 jQuery UI 中没有的一些小部件包括：

• 展开器

• 单选按钮

• 文本框

• 下拉菜单

• 复选框

• 列表

• 弹出

• 分隔符

• 超级面板

• 视频播放器

下面提到了 jQuery UI 和 Wijmo 之间的差异，展示了哪些功能在两者中都存在或只存在于其中之一。

Wijmo Professional 旨在为开发封闭源代码项目的企业使用。它包括 Wijmo Open 中的所有内容，以及以下内容：

• 图表

• 组合框

• 数据源

• 网格

• 输入

  • 日期

  • 遮罩

  • 数字

• 媒体

  • 轮播

  • 画廊

  • 灯箱

• 分页器

• 评分

• 树

• 上传

• 向导

许可费用为每位开发者 495 美元(wijmo.com/purchase/)。然而，ComponentOne 确实为开源应用程序提供 GPLv3 许可证。

必要的背景

在阅读此书之前，你应该熟悉 HTML、CSS、JavaScript 和 jQuery。jQuery UI 知识不是必需的，但会是一个加分项，因为 Wijmo 在许多方面与 jQuery UI 相似。只有本书的最后一章，基于扩展 Wijmo，需要高级 CSS 和 JavaScript 知识。对 Web 开发的基本理解将帮助你完成本书。如果这一章中的示例对你来说很自然，那么你已经走在学习 Wijmo 的正确道路上。

摘要

到目前为止，你应该已经为开发设置了 Wijmo 的最新版本。如果没有，本书中所有示例的源代码都可在github.com/yuguang/wijmo_essentials找到。将其下载到电脑上的一个永久位置，你将能够使用所有代码。所有示例都采用 MIT 许可，因此你可以按任何你想要的方式使用它。

现在你已经在电脑上为开发设置了 Wijmo，你就可以开始探索 Wijmo 了。在下一章中，我们将深入探讨对话框小部件，并查看一些在 jQuery 版本中不可用的功能。

除了设置 Wijmo 之外，我们还涵盖了其许可细节。如果你计划在专有应用程序中使用 Wijmo 的任何完整小部件，请确保获取许可证。

第二章. 对话框小部件

对话框小部件属于 Wijmo Open 集合。它是 jQuery UI 对话框的增强，具有更多功能。Wijmo 对话框可以最大化、最小化、固定到屏幕位置，并在对话框窗口中显示来自 URL 的外部内容。本章讨论了 Wijmo 中添加的选项、方法和事件，以及如何使用它们来改变对话框的外观和行为。

Wijmo 对话框小部件的快速查看

默认情况下，对话框窗口包括固定、切换、最小化、最大化和关闭按钮。将对话框固定到屏幕上的位置会禁用标题栏上的拖动功能。对话框仍然可以调整大小。最大化对话框会使它占据浏览器窗口内的区域。切换它会使对话框展开或折叠，以便对话框内容显示或隐藏，同时标题栏保持可见。如果这些按钮影响了您的风格，可以使用 captionButtons 选项将其关闭。您可以从以下屏幕截图中看到对话框在浏览器中的呈现方式：

与 jQuery UI 相比，Wijmo 提供了额外的 API 来改变对话框的行为。新的 API 主要用于标题栏上的按钮和窗口堆叠管理。窗口堆叠决定了哪些窗口会绘制在其他窗口之上。点击对话框会将其置于其他对话框之上，并改变它们的窗口堆叠设置。以下表格显示了 Wijmo 中添加的选项。

选项	事件	方法
captionButtons contentUrl disabled expandingAnimation stack zIndex	blur buttonCreating stateChanged	disable enable getState maximize minimize pin refresh reset restore toggle widget

• contentUrl 选项允许您指定在窗口中加载的 URL。

• 当对话框从折叠状态切换到展开状态时，会应用 expandingAnimation 选项。

• stack 和 zIndex 选项决定了对话框是否位于其他对话框之上。

• 与输入元素上的 blur 事件类似，当对话框失去焦点时，会触发对话框的 blur 事件。

• 当创建按钮时，会调用 buttonCreating 方法，并可以修改标题栏上的按钮。

• disable 方法禁用了对话框的事件处理器。它阻止了默认按钮操作并禁用了拖动和调整大小。

• widget 方法返回对话框的 HTML 元素。

• maximize、minimize、pin、refresh、reset、restore 和 toggle 方法作为标题栏上的按钮提供。了解它们的功能的最佳方式是亲自尝试操作。

• 此外，getState 方法用于查找对话框状态，并返回最大化、最小化或正常状态。

• 类似地，当对话框状态改变时，会触发 stateChanged 事件。

这些方法作为 wijdialog 方法的参数被调用。要禁用按钮交互，传递字符串 disable：

$("#dialog").wijdialog ("disable");

许多方法都是成对出现的，enable 和 disable 就是其中之一。调用 enable 会使按钮再次启用。另一对是 restore/minimize。minimize 将对话框隐藏在屏幕左下角的托盘上。restore 将对话框恢复到正常大小并再次显示。

对于可用性来说，最重要的选项是 captionButtons 选项。尽管用户可能熟悉最小化、调整大小和关闭按钮；但固定和切换按钮在常见的桌面环境中并不常见。因此，您将想要根据您在项目中使用对话框的方式选择可见的按钮。要关闭标题栏上的按钮，将 visible 选项设置为 false。可以创建一个仅包含关闭按钮的默认 jQuery UI 对话框窗口：

$("#dialog").wijdialog({captionButtons: {
  pin: { visible: false },
  refresh: { visible: false },
  toggle: { visible: false },
  minimize: { visible: false },
  maximize: { visible: false }
  }
});

每个按钮的其他选项是 click、iconClassOff 和 iconClassOn。click 选项指定按钮的事件处理器。尽管按钮带有默认操作，但您可能希望为自定义操作使用不同的图标。这就是 iconClass 发挥作用的地方。iconClassOn 定义按钮加载时的 CSS 类。iconClassOff 是点击按钮后的按钮图标类。有关可用的 jQuery UI 图标及其类别的列表，请参阅 jquery-ui.googlecode.com/svn/tags/1.6rc5/tests/static/icons.html。

我们的下一个示例使用 ui-icon-zoomin、ui-icon-zoomout 和 ui-icon-lightbulb。它们可以通过在网页上切换图标文本找到，如前一个截图所示。

添加自定义按钮

jQuery UI 的对话框 API 缺少配置标题栏上显示按钮的选项。Wijmo 不仅提供了有用的默认按钮，还允许你轻松地覆盖它们。

<!DOCTYPE HTML>
<html>
<head>
  ...
  <style>
    .plus {
      font-size: 150%;
    }
  </style>
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $('#dialog').wijdialog({
        autoOpen: true,
        captionButtons: {
        pin: { visible: false },
        refresh: { visible: false },
        toggle: {visible: true, click: function () {
          $('#dialog').toggleClass('plus')
        }, iconClassOn: 'ui-icon-zoomin', iconClassOff:          'ui-icon-zoomout'},
        minimize: { visible: false },
        maximize: {visible: true, click: function () {
        alert('To enloarge text, click the zoom icon.')
        }, iconClassOn: 'ui-icon-lightbulb'},
        close: {visible: true, click: self.close, iconClassOn:'ui-icon-close'}
        }
      });
    });
  </script>
</head>
<body>
  <div id="dialog" title="Basic dialog">
    <p>Loremipsum dolor sitamet, consectetueradipiscingelit. Aeneancommodo ligula eget dolor.Aeneanmassa. Cum sociisnatoquepenatibusetmagnis dis parturient montes, nasceturridiculus mus. Donec quam felis, ultriciesnec, pellentesqueeu, pretiumquis, sem. Nullaconsequatmassaquisenim. Donecpedejusto, fringillavel, aliquetnec, vulputate</p>
  </div>
</body>
</html>

我们通过传递 captionButtons 选项创建对话框窗口。固定、刷新和最小化按钮的 visible 设置为 false，以便标题栏初始化时不包含它们。最终输出如图所示：

此外，切换和最大化按钮已被修改并赋予了自定义行为。切换按钮通过应用或移除 CSS 类来切换文本的字体大小。其默认图标，通过 iconClassOn 设置，表示点击它将放大文本。一旦点击，图标将变为缩小图标。同样，最大化按钮的行为和外观也已被更改。在标题栏之前显示最大化图标的位置，现在有一个带有提示的灯泡图标。

虽然这种方法在标题栏中添加新按钮看起来有些笨拙，但目前 Wijmo 提供的唯一选项。在内容区域添加按钮要简单得多。buttons选项指定要在标题栏下显示在对话框窗口内容区域的按钮。例如，要显示一个简单的确认按钮：

$('#dialog').wijdialog({buttons: {ok: function () {
  $(this).wijdialog('close')
}}});

按钮上显示的文本是ok，点击按钮会隐藏对话框。调用$('#dialog').wijdialog('open')将再次显示对话框。

配置对话框小部件的外观

Wijmo 提供了几个选项来改变对话框的外观，包括标题、高度、宽度和位置。对话框的标题可以通过设置对话框的div元素的title属性或使用title选项来更改。要更改对话框的主题，您可以在wijmo-wijdialog和wijmo-wijdialog-captionbutton类上使用 CSS 样式：

<!DOCTYPE HTML>
<html>
<head>
  ...
  <style>
    .wijmo-wijdialog {

      /*rounded corners*/
      -webkit-border-radius: 12px;
      border-radius: 12px;
      background-clip: padding-box;

      /*shadow behind dialog window*/
      -moz-box-shadow: 3px 3px 5px 6px #ccc;
      -webkit-box-shadow: 3px 3px 5px 6px #ccc;
      box-shadow: 3px 3px 5px 6px #ccc;

      /*fade contents from dark gray to gray*/
      background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
      background-image: -webkit-linear-gradient(top, #444444, #999999);
      background-image: -moz-linear-gradient(top, #444444, #999999);
      background-image: -o-linear-gradient(top, #444444, #999999);
      background-image: linear-gradient(to bottom, #444444, #999999);

      background-color: transparent;

      text-shadow: 1px 1px 3px #888;

    }
  </style>
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $('#dialog').wijdialog({width: 350});
    });
  </script>
</head>
<body>
  <div id="dialog" title="Subtle gradients">
    <p>Loremipsum dolor sitamet, consectetueradipiscingelit. Aeneancommodo ligula eget dolor.Aeneanmassa. Cum sociisnatoquepenatibusetmagnis dis parturient montes, nasceturridiculus mus. Donec quam felis, ultriciesnec, pellentesqueeu, pretiumquis, sem. Nullaconsequatmassaquisenim. Donecpedejusto, fringillavel, aliquetnec, vulputate
    </p>
  </div>
</body>
</html>

现在我们向对话框添加圆角框、框阴影和文本阴影。这是通过.wijmo-wijdialog类完成的。由于许多 CSS3 属性在不同浏览器上的名称不同，因此使用了浏览器特定的属性。例如，在基于 Webkit 的浏览器上需要-webkit-box-shadow。初始化时将对话框宽度设置为 350 px，以便标题文本和按钮都适合一行。

加载外部内容

Wijmo 使在 iFrame 中加载内容变得简单。只需传递带有contentUrl选项的 URL：

$(document).ready(function () {
  $("#dialog").wijdialog({captionButtons: {
    pin: { visible: false },
    refresh: { visible: true },
    toggle: { visible: false },
    minimize: { visible: false },
    maximize: { visible: true },
    close: { visible: false }
    },
  contentUrl: "http://wijmo.com/demo/themes/"
  });
});

这将在带有刷新和最大化/还原按钮的对话框窗口中加载 Wijmo 主题探索器。以下截图显示了此输出：

刷新按钮会重新加载 iFrame 中的内容，这对于动态内容很有用。最大化按钮会调整对话框窗口的大小。

摘要

Wijmo 对话框小部件是 jQuery UI 对话框的扩展。在本章中，探讨了 Wijmo 对话框小部件的独特功能，并给予了重点介绍。我向您展示了如何添加自定义按钮，如何更改对话框外观，以及如何在对话框中从其他 URL 加载内容。

第三章。表单组件

Wijmo 表单装饰器小部件为单选按钮、复选框、下拉列表和文本框元素提供了跨所有平台的统一视觉风格。有单独的库用于装饰下拉列表和其他表单元素，但 Wijmo 为它们提供了一个统一的主题。jQuery UI 缺乏表单装饰器，将表单组件的样式留给了设计师。使用 Wijmo 表单组件可以在开发过程中节省时间，并在所有浏览器中提供一致的界面。要使用这些具有自定义样式的表单组件，请参阅第八章 扩展 Wijmo。

复选框

复选框小部件是 Wijmo 提供的样式增强的绝佳例子，它优于默认表单控件。当允许选择多个选项时使用复选框。以下截图显示了不同的复选框状态：

Wijmo 为复选框添加了圆角、渐变和悬停高亮效果。此外，尺寸的增加使其更易于使用。Wijmo 复选框可以被初始化为选中状态。用于此目的的代码如下：

<!DOCTYPE HTML>
<html>
<head>
  ...
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $("#checkbox3").wijcheckbox({checked: true});
      $(":input[type='checkbox']:not(:checked)").wijcheckbox();
    });
  </script>
<style>
div {
  display: block; margin-top: 2em;
  }
</style>
</head>
<body>
  <div><input type='checkbox' id='checkbox1' /><label for='checkbox1'>Unchecked</label></div>
  <div><input type='checkbox' id='checkbox2' /><label for='checkbox2'>Hover</label></div>
  <div><input type='checkbox' id='checkbox3' /><label for='checkbox3'>Checked</label></div>
</body>
</html>.

在这种情况下，checkbox3 在初始化时被设置为 选中。

注意

如果一个复选框初始化了两次，您将不会得到相同的结果。在这里，我们通过在将 checkbox3 设置为 选中 后选择未选中的复选框来避免这种情况。

单选按钮

与复选框相比，单选按钮只允许选择多个选项中的一个。此外，它们通过 HTML 标记进行自定义，而不是通过 JavaScript API。例如，通过 checked 属性设置选中选项：

<input type="radio" checked />

jQuery UI 提供了一个单选按钮小部件，如以下截图所示，根据我的经验，这会让用户产生混淆，因为他们认为可以选择多个选项：

Wijmo 单选按钮在外观上与常规单选按钮相似，这样用户就会期望相同的行为，如下面的截图所示：

Wijmo 单选按钮通过在单选按钮元素上调用 wijradiomethod 方法进行初始化：

<!DOCTYPE html>
<html>
<head>
  ...
  <script id="scriptInit" type="text/javascript">$(document).ready(function () {
      $(":input[type='radio']").wijradio({
        changed: function (e, data) {
          if (data.checked) {
            alert($(this).attr('id') + ' is checked')
          }
        }
    });
  });
</script>
</head>
<body>
  <div id="radio">
  <input type="radio" id="radio1" name="radio"/><label for="radio1">Choice 1</label>
  <input type="radio" id="radio2" name="radio" checked="checked"/><label for="radio2">Choice 2</label>
  <input type="radio" id="radio3" name="radio"/><label for="radio3">Choice 3</label>
  </div>
</body>
</html>

在此示例中，changed 选项（复选框也有此选项）被设置为一个处理程序。处理程序将一个 jQuery.Event 对象作为第一个参数传递。它只是一个针对浏览器一致性进行规范化的 JavaScript 事件对象。第二个参数暴露了小部件的状态。对于复选框和单选按钮，它是一个仅包含 checked 属性的对象。

下拉列表

在所有浏览器中保持下拉菜单样式的一致性是非常困难的。Wijmo 提供了两种样式 HTML select 和 option 元素的方法。当没有选项组时，ComboBox 是更好的小部件。这将在下一节中介绍。对于具有嵌套在选项组下的选项的下拉菜单，只有 wijdropdown 小部件才能工作。例如，考虑一个按大陆分类的国家选择器：

<!DOCTYPE HTML>
<html>
<head>
  ...
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
    $('select[name=country]').wijdropdown();
      $('#reset').button().click(function(){
        $('select[name=country]').wijdropdown('destroy')
        });
      $('#refresh').button().click(function(){
        $('select[name=country]').wijdropdown('refresh')
      })
    });
  </script>
</head>
<body>
  <button id="reset">
    Reset
  </button>
  <button id="refresh">
    Refresh
  </button>
  <select name="country" style="width:170px">
    <optgroup label="Africa">
    <option value="gam">Gambia</option>
    <option value="mad">Madagascar</option>
    <option value="nam">Namibia</option>
    </optgroup>
    <optgroup label="Europe">
    <option value="fra">France</option>
    <option value="rus">Russia</option>
    </optgroup>
    <optgroup label="North America">
    <option value="can">Canada</option>
    <option value="mex">Mexico</option>
    <option selected="selected" value="usa">United States</option>
    </optgroup>
  </select>
</body>
</html>

将 select 元素的宽度设置为 170 像素，以便在下拉菜单初始化时，下拉菜单和项目都具有 170 像素的宽度。这允许 北美 选项类别在单行中显示，如下面的截图所示。尽管下拉小部件没有 width 选项，但在初始化时它会采用 select 元素的宽度。要初始化下拉菜单，请在 select 元素上调用 wijdropdown 方法：

$('select[name=country]').wijdropdown();

当菜单切换时，下拉元素使用盲动画来显示项目。

此外，它还将与按钮相同的点击动画应用到滑块和菜单：

为了将下拉菜单重置为选择框，我添加了一个调用 destroy 方法的重置按钮。如果你有动态更改下拉菜单样式的 JavaScript 代码，refresh 方法将再次应用 Wijmo 样式。

ComboBox

Wijmo ComboBox 在 select 和 option 元素上工作。选项可以通过 HTML 标记或 JavaScript 对象表示法 (JSON) 加载。在我们的示例中，我们通过使用标记来加载菜单项：

<!DOCTYPE HTML>
<html>
<head>
  ...

  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $("#states").wijcombobox({
        dropdownHeight: 150,
        dropdownWidth: 200,
        showingAnimation: { effect: "clip" },
        hidingAnimation: { effect: "fade" }
      });
      $("#states").bind("wijcomboboxselectedindexchanged", function(e, data) {
      $('#message').text('You moved from ' + data.oldItem.label + ' to ' + data.selectedItem.label + '.');
      } )
    });
  </script>
</head>
<body>
  <p><label id="output">Where do you live? (type to autocomplete)</label></p>
  <div>
    <select id="states">
    <option value="AL">Alabama</option>
      ...
    <option value="WY">Wyoming</option>
    </select>
  </div>
  <p id="message"></p>
</body>
</html>

showingAnimation 方法指定了当选项变为可见时使用的动画。所有 jQuery UI 效果都可以使用，你可以在 jQuery UI 效果演示页面上尝试它们：jqueryui.com/effect/. 对于 hidingAnimation 方法，我使用了淡入淡出效果，逐渐将不透明度降低到 0。我们绑定到 wijcomboboxselectedindexchanged 事件类型，该事件在 ComboBox 的选中索引改变时触发，用于显示涉及旧项和新项的消息。

InputDate

InputDate 小部件提供了一个方便的视觉机制，帮助用户选择日期。这个小部件支持广泛的日期格式，使用户选择日期并提供信息的方式更加一致。InputDate 小部件仅在 input 元素上工作。要显示没有 input 元素的日历，请使用日历小部件，其外观如下面的截图所示：

要显示一个带有触发日历的按钮的 InputDate 小部件，请将 input 元素包裹在一个固定宽度的块中，使用 showTrigger 选项初始化小部件，并移除 wijmo-wijinput-trigger 类：

<!DOCTYPE HTML>
<html>
<head>
  <title>InputDate Example</title>
  ...
$(document).ready(function () {
  $("#calendarInput").wijinputdate({showTrigger: true});

});
</script>
  <style>
    .date {
      width: 200px;
    }
</style>
</head>
<body>
  <div class="date"><input type="text" id="calendarInput" /></div>
</body>
</html>.

类似地，显示一个带有用于增加或减少日、月和年字段的旋转按钮的输入日期，需要额外的配置。虽然input字段仍然接受在日期格式内有效的按键，但旋转按钮提供了另一种选择。点击一次旋转按钮将所选日期段的价值增加或减少一个。按住点击将逐渐加速日期段变化的速度。自己试一试，感受一下视觉效果：

<!DOCTYPE HTML>
<html>
<head>
  ...
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $spinnerInput = $("#spinnerInput");
      $spinnerInput.wijinputdate({showSpinner: true, dateFormat: 'g', activeField: 3});
    });
  </script>
</head>
<body>
  <div class="date"><input type="text" id="spinnerInput" /></div>
</body>
</html>

当处理日期输入字段时，最重要的部分是将日期发送到服务器。Wijmo 根据您的服务器设置和它接受的日期格式提供各种dateFormat选项。特别是，如果您的服务器接受短日期（mm/dd/yyyy）和短时间（hh:mmtt）格式，那么通用的日期格式g将适用于您。只需将dateFormat选项设置为g来初始化 InputDate 小部件。在先前的示例中，它将是：

$spinnerInput.wijinputdate({showSpinner: true, dateFormat: 'g'});

小贴士

要从输入中获取日期，请调用getText方法：

$spinnerInput.wijinputdate("getText")

该函数返回输入框中显示的文本。

wijinput格式字符串遵循与 Java 的SimpleDateFormat类相同的约定，除了 AM/PM 指示符。以下表格总结了格式化选项：

字母	日期或时间组件	示例	输出
y	年	yyyy; yy	1996; 96
M	年中的月份	MMMM;MMM;MM	July;Jul;07
d	月份中的日	dd	10
H	天中的小时（0-23）	H	0
h	上午/下午的小时（1-12）	hh	12
m	小时中的分钟	mm	30
s	分钟中的秒	ss	55
t	上午/下午	tt	AM

例如，如果dateFormat设置为MMM-dd-yyyy，你可以在字段中看到类似Jul-14-2013的日期。

输入掩码

输入掩码小部件向用户显示输入框的正确格式。此外，它防止无效输入并提供关于所需数据的视觉提示。以下是一个示例：

输入格式由掩码指定。有关选项的列表，请参阅wijmo.com/wiki/index.php/InputMask。对于我们的示例，我们为美国电话号码创建了一个输入掩码，其中区号是可选的。这些可选字符可以留空：

<!DOCTYPE HTML>
<html>
<head>
  ...
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $("#textbox1").wijinputmask({
        mask: '(999) 000 - 0000'
      });
    });
  </script>
</head>
<body>
  <input type="text" id="textbox1" />
</body>
</html>

掩码元素9表示可选数字，而0表示必需数字。如破折号和括号之类的文字按掩码中的显示方式显示。默认情况下，无效输入不会显示在输入元素中。为了在输入无效时给用户反馈，我们添加一个错误 CSS 类，该类在此类输入上触发：

<!DOCTYPE HTML>
<html>
<head>
  ...
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $("#phoneNumber").wijinputmask({
        mask: '(999) 000-0000',
        resetOnSpace: true,
        invalidInput: function () {
          $("#phoneNumber").addClass('error')
        },
        textChanged: function () {
          $("#phoneNumber").removeClass('error')
        }
      });
    });
  </script>
<style>
  .error {
    border:1px solid red;
  }
  .mask {
  width: 130px;
  }
</style>
</head>
<body>
  <div class="mask"><input type="text" id="phoneNumber" /> </div>
</body>
</html>

当文本改变时，我们移除error类。在无效输入时，我们再次添加该类。另一个有用的输入掩码是显示在以下截图中的日期、月份缩写和年格式：

这可以通过输入掩码 00->L<LL-0000 来完成，其中 >L 表示从 A 到 Z 的一个大写字母，<LL 表示从 a 到 z 的两个小写字母。要为每个字段添加一个 clear 按钮，请调用 jQuery UI 按钮函数并在其上注册点击事件。由于清除按钮放置在输入旁边，我们在其兄弟输入元素上调用 setText 方法。

<!DOCTYPE HTML>
<html>
<head>
  ...
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $("#phoneNumber").wijinputmask({
        mask: '(999) 000-0000',
        resetOnSpace: true,
        invalidInput: function () {
          $("#phoneNumber").addClass('error')
        },
      textChanged: function () {
        $("#phoneNumber").removeClass('error')
      }
    });
      $("#date").wijinputmask({
        mask: '00->L<LL-0000',
        resetOnSpace: true
      });
      $("button").button().click(function () {
        $(this).siblings().find("input").wijinputmask("setText", "");
      })
    });
  </script>
<style>
  .error {
    border:1px solid red;
  }
  .mask {
     width: 130px;
  }
  .ui-button-text-only .ui-button-text {
    padding: 3px 5px;
  }
</style>
</head>
<body>
  <div class="mask"><input type="text" id="phoneNumber" /><button class="reset">Clear</button></div>
  <div class="mask"><input type="text" id="date" /><button class="reset">Clear</button></div>
</body>
</html>

注意，我们还覆盖了按钮填充的 CSS，以便按钮与输入框大小相同。在每个字段旁边都有一个 reset 按钮，如果用户在某个字段上出错，他们就不需要再次填写表单。

摘要

在本章中，我们学习了 Wijmo 的表单组件。复选框用于可以选择多个项目的情况。Wijmo 的复选框小部件在默认复选框的基础上增加了样式增强。单选按钮用于只选择一个项目的情况。虽然 jQuery UI 只支持单选按钮上的按钮组，但 Wijmo 的单选按钮要直观得多。Wijmo 的下拉小部件应该只在存在嵌套或分类的 <select> 选项时使用。当选项的结构是扁平的时，ComboBox 带有更多功能。InputDate 用于显示日期选择日历小部件，而 InputMask 的目的是为用户提供正确的输入格式的提示。

现在你已经学习了 Wijmo 中的表单组件，在进入下一章之前，先尝试自己构建一个表单。尝试制作一个嵌套表单，其中在单选组中选择一个选项会显示或隐藏字段。

第四章 处理图片

本章介绍了用于处理图片的小部件：轮播、相册和灯箱。轮播是相册组件的简化形式，默认情况下没有缩略图。它们都用于在页面上显示一系列图片。轮播旨在一次显示多张图片。灯箱的工作方式不同，它以全尺寸显示选定的图片，并在页面内容上方打开对话框。

使用轮播组件

轮播组件显示一系列图片。默认情况下，图片水平排列，带有上一页和下一页按钮以滚动浏览。可以在每张图片的底部显示标题。在接下来的部分中，我将向您展示如何创建、配置和使用轮播组件。

创建轮播组件

要设置轮播组件，容器元素的宽度和高度需要与图片尺寸相同。例如，如果您的图片尺寸为 300 x 200，那么在 CSS 中需要设置如下：

<!DOCTYPE HTML>
<html>
<head>
  ...
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $("#wijcarousel").wijcarousel({
        orientation: "horizontal",
        display: 1
      });
    });
  </script>
  <style type="text/css">
    #wijcarousel
    {
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="wijcarousel">
    <ul>
      <li>
        <img alt="1" src="img/1" title="Word1"/><span>Word Caption 1</span></li>
      <li>
        <img alt="2" src="img/2" title="Word2" /><span>Word Caption 2</span></li>
      <li>
        <img alt="3" src="img/3" title="Word3"/><span>Word Caption 3</span></li>
      <li>
        <img alt="4" src="img/4" title="Word4"/><span>Word Caption 4</span></li>
      <li>
        <img alt="5" src="img/5" title="Word5"/><span>Word Caption 5</span></li>
      <li>
        <img alt="6" src="img/6" title="Word6" /><span>Word Caption 6</span></li>
    </ul>
  </div>
</body>
</html>

使用这些设置，一次显示一张图片，图片两侧有上一页和下一页按钮，如下面的截图所示：

例子中使用的所有图片尺寸相同。这允许我们设置容器尺寸而无需裁剪或调整图片大小。

配置轮播组件

轮播组件支持许多设置，让您可以控制用户界面中可用的功能以及其显示。以下是最有用的设置：

Setting	描述
display	此设置指定显示的图片数量
step	此设置指定过渡时滚动的图片数量
orientation	此设置指定是否水平或垂直滚动图片
showTimer	此设置允许轮播中的图片通过显示进度和播放/暂停按钮的计时器进行播放
loop	此设置允许循环浏览图片，以便最后一张图片返回到第一张

以下图示显示了轮播组件的不同部分：

使用显示选项显示多张图片

要使用轮播组件显示多张图片，我们需要将wijcarousel元素的宽度按显示图片的数量成比例增加。由于每张图片宽度为 300 像素，要一次显示两张图片，我们将显示选项设置为2并将元素宽度设置为 600 像素。作为另一个例子，要一次显示三张图片，我们设置显示选项和 CSS，如下所示：

<!DOCTYPE HTML>
<html>
<head>
  ...
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $("#wijcarousel").wijcarousel({
        orientation: "horizontal",
        display: 3,
        step: 2
      });
    });
  </script>
<style type="text/css">
  #wijcarousel
  {
    width: 900px;
    height: 200px;
  }
</style>
</head>
<body>
  <div id="wijcarousel">
  <ul>
    <li>
      <img alt="1" src="img/1" title="Word1" /><span>Word Caption 1</span></li>
      <li>
      <img alt="2" src="img/2" title="Word2" /><span>Word Caption 2</span></li>
    <li>
      <img alt="3" src="img/3" title="Word3" /><span>Word Caption 3</span></li>
    <li>
      <img alt="4" src="img/4" title="Word4" /><span>Word Caption 4</span></li>
    <li>
      <img alt="5" src="img/5" title="Word5" /><span>Word Caption 5</span></li>
    <li>
      <img alt="6" src="img/6" title="Word6" /><span>Word Caption 6</span></li>
    </ul>
  </div>
</body>
</html>

如以下截图所示，将宽度设置为 900 像素为下一页和上一页按钮提供了足够的空间，这样它们就不会与图片重叠。

我们还在选项中设置了step属性为2，这样点击下一个按钮时，当前图片会向左滑动，使得其中两张图片消失。Wijmo 在将第三张图片滑入第一张图片位置时，会播放一个不错的动画。要尝试各种动画和选项，请访问wijmo.com/demo/explore/?widget=Carousel&sample=Animation。

指定导航选项

除了下一个和上一个按钮外，还可以添加一个分页器来导航到特定的图片。分页器有多种形式，由pagerType选项指定。可用选项有数字、点、缩略图和滑块。如果您想使用缩略图，我建议切换到画廊小部件，因为它默认包含缩略图。画廊小部件将在下一节中介绍。分页器以及其他元素的位置设置字段，用于确定元素之间的相对位置。

对于位置选项的视觉展示，请参考下一章中的定位工具提示部分。在这个例子中，我们使用my选项将分页器的中心顶部放置在轮播图的底部，并通过偏移量向左移动 10 像素：

pagerPosition: {
  my: "center top",
  at: "center bottom",
  offset: "-10 0"
}

另一个使轮播图看起来更整洁的实用选项是将按钮显示在外部，而不是与图片重叠。

将所有这些放在一起，我们初始化轮播图小部件并添加分页器如下：

$("#wijcarousel").wijcarousel({
  orientation: "horizontal",
  display: 1,
  showPager: true,
  pagerPosition: {
    my: "center top",
    at: "center bottom",
    offset: "-10 0"
  },
  pagerType: "dots",
  buttonPosition: "outside"
});

为了使轮播图居中对齐，一个常见的模式是设置宽度并让边距自动调整：

#wijcarousel
{
  display: block;
  margin: 0 auto;
  width: 304px;
  height: 200px;
}

最终结果是用户友好的、干净的界面，如下面的截图所示：

添加计时器和自动播放

要让图片像幻灯片一样播放，我们只需将auto选项设置为true。结合loop选项，图片可以连续播放。如果您有很多图片要展示，您可能需要减少每张图片显示的间隔或持续时间。此外，timer选项允许用户暂停幻灯片。进行中的计时器看起来如下面的截图所示：

以下是一个示例设置，在移动到下一张图片之前，每张图片播放三秒钟：

$("#wijcarousel").wijcarousel({
  orientation: "vertical",
  interval: 3000,
  loop: true,
  auto: true,
  showTimer: true,
  display: 1
});

使用画廊小部件

如同在轮播图小部件部分提到的，画廊小部件默认显示可导航的缩略图。选择一个缩略图将显示其上方的图像的大版本。

创建画廊小部件

如您现在可能预料到的，Wijmo 画廊小部件是通过wijgallery方法创建的：

$("#wijgallery").wijgallery({
  thumbsDisplay: 3
});

这个画廊尽可能地重用了轮播图示例。对于画廊，我们只限制了容器宽度，因为它需要空间来显示缩略图：

#wijgallery {
  width: 300px;
}

由于我们图像下方的水平区域，我们设置了缩略图的数量为 3。Wijmo 会自动裁剪图像以适应缩略图。我们的图库小部件现在看起来如下截图所示：

在示例中，我们使用了与轮播图相同的 HTML 列表格式。尽管如此，Wijmo 文档建议使用另一种格式：

<div id="wijgallery">
  <ul>
    <li><a href="http://lorempixum.com/300/200/nature/1">
    <img alt="1" src="img/1" title="Word Caption 1"/>
    </a></li>
    <li><a href="http://lorempixum.com/300/200/nature/2">
    <img alt="2" src="img/2" title="Word Caption 2"/>
    </a></li>
    <li><a href="http://lorempixum.com/300/200/nature/3">
    <img alt="3" src="img/3" title="Word Caption 3"/>
    </a></li>
    <li><a href="http://lorempixum.com/300/200/nature/4">
    <img alt="4" src="img/4" title="Word Caption 4"/>
    </a></li>
    <li><a href="http://lorempixum.com/300/200/nature/5">
    <img alt="5" src="img/5" title="Word Caption 5"/>
    </a></li>
    <li><a href="http://lorempixum.com/300/200/nature/6">
    <img alt="6" src="img/6" title="Word Caption 6"/>
    </a></li>
  </ul>
</div>

虽然更冗长，但这种格式允许我们指定缩略图图像。现在每个 300 x 200 像素的图像都附有一个 100 x 100 像素的缩略图。图库小部件会自动调整图像大小以适应显示区域。如果您想在图库小部件中调整图像大小而不改变宽高比，请参考一位开发者在wijmo.com/maintaining-aspect-ratio-in-wijgallery/上发表的博客文章。

图库小部件中的视频播放

要在图库小部件中播放视频，您只需指定视频的缩略图和链接。以下是一个包含三个视频的示例标记：

<div id="wijgallery">
  <ul>
    <li><a       href="http://www.youtube.com/v/0ZNSVMaPIUQ?version=3&amp;hl=en_US">
    <img width="120" height="90"
      src="img/0.jpg"></a>
    </li>
    <li><a       href="http://www.youtube.com/v/4B22QGJoxZQ?version=3&amp;hl=en_US">
      <img width="120" height="90"
        src="img/0.jpg"></a>
    </li>
    <li><a       href="http://www.youtube.com/v/bpPMAyAxO4Q?version=3&amp;hl=en_US">
      <img width="120" height="90"
        src="img/0.jpg"></a>
    </li>
  </ul>
</div>

缩略图将在图库的底部显示。为了防止 Wijmo 裁剪缩略图，我们可以将thumbsLength选项设置为图像的宽度。此外，thumbsDisplay选项，它决定了显示的缩略图数量，需要调整。模式可以设置为swf用于 Flash 或其他视频类型。由于我们没有为视频指定标题，我们将showCaption选项设置为false：

$("#wijgallery").wijgallery({
  thumbsDisplay: 4, 
  thumbsLength: 100, 
  mode: "swf", 
  showCaption: false 
});

在此示例中，假设缩略图的宽度为 100 像素。播放 Flash 视频需要额外的库。必须在调用wijgallery方法之前加载swfobject.js库。以下是一个配置为播放 YouTube 视频的 Wijmo 图库示例：

使用轻量级对话框小部件

轻量级对话框小部件是一个用于聚焦图像的工具。它在一个模态对话框中显示在页面其他内容之上的当前图像。Wijmo 轻量级对话框小部件与轮播图和图库小部件共享许多共同功能，包括导航按钮、计时器和标题区域。轻量级对话框带有默认设置，当鼠标悬停时显示控制按钮以及图像计数。此外，它还在右上角添加了一个关闭按钮。

创建轻量级对话框小部件

与图库和轮播图小部件不同，轻量级对话框需要指定anchor元素的rel属性中的选项。以下示例显示了所需的元素和创建轻量级对话框的脚本：

<!DOCTYPE HTML>
<html>
<head>
...
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $("#lightbox").wijlightbox();
    });
  </script>
  <style type="text/css">
    #lightbox {
      width: 600;
    }
  </style>
</head>
<body>
  <div id="lightbox" class="">
  <a href="http://lorempixum.com/600/400/nature/1" rel="wijlightbox[stock];player=img">
  <imgsrc="img/1" title="nature 1"/></a>
  <a href="http://lorempixum.com/600/400/nature/2" rel="wijlightbox[stock];player=img">
  <imgsrc="img/2" title="nature 2"/></a>
  <a href="http://lorempixum.com/600/400/nature/3" rel="wijlightbox[stock];player=img">
  <imgsrc="img/3" title="nature 3"/></a>
  </div>
</body>
</html>

灯箱组件需要在锚点元素内部包含一个img元素。此外，img元素需要有一个标题，该标题将作为标题显示。如您现在所熟悉的那样，我们将灯箱的width属性设置为图像的宽度。当您不带设置调用wijlightbox方法并点击其中一张图片时，您会在页面内容上方看到一个图像框架，如下面的截图所示：

更改灯箱组件的外观

默认情况下，灯箱在悬停时会显示导航和关闭按钮；同时，幻灯片播放的播放/暂停按钮也可用。要显示这些按钮，请使用ctrlButtons选项。您可能还希望通过将modal选项设置为true来以modal视图显示灯箱。为了避免导航控件与图像重叠，请将controlsPosition属性设置为outside：

$("#lightbox").wijlightbox({
  modal: true,
  controlsPosition: 'outside',
  ctrlButtons: 'play|stop'
});

结果如下所示：

摘要

在本章中，我们学习了轮播组件，它用于显示多个图像，以及如何使用显示和导航选项来配置它。本章还介绍了轮播组件可用的动画和计时器选项。接下来，我们学习了画廊组件及其用于播放视频的使用方法。最后，本章以灯箱组件的章节结束。

第五章。高级小部件

Wijmo 包含许多在 Web 开发中常用的高级小部件。这些应用程序组件通常使用库或插件实现。在本章中，我们涵盖了 tooltip、上传、视频和编辑器小部件。对于开发者来说，使用这些 Wijmo 小部件而不是其他库的主要优势是其一致的 API。对于用户来说，界面组件看起来更一致。

使用 tooltip 小部件

默认情况下，浏览器会在鼠标悬停在具有 title 属性的图像元素上时显示文本框或气球。为了让这些文本气球更易于用户使用，Wijmo 的 tooltip 小部件使用 JavaScript 和 CSS 来增强它们。默认情况下，Wijmo 在 tooltip 元素的 title 属性中显示文本。考虑一个简单的示例，包含一个输入元素：

<input title="Instructions for the form go here" type="text" />

调用 $("input[title]").wijtooltip() 会在鼠标悬停在元素上时显示 tooltip。此外，jQuery 选择器仅应用于具有标题的输入元素。在本节中，我们将探讨如何定位 tooltip、在内部加载 AJAX 内容以及更改其样式。

定位 tooltip 小部件

Wijmo 使用 jQuery UI 的位置方法，该方法包含四个主要参数：

字段	值	描述
my	left/right/center/top/bottom/center	被移动元素上的位置
at	left/right/center/top/bottom/center	目标元素上对齐的位置
of	selector	要定位的目标元素
offset	Integer	指定水平和垂直移动的 x y 偏移量

语法几乎就像一个句子。假设我们想要定位一个 ID 为 move-it 的框，使其左上角位于目标元素的右下角；那么我们可以使用以下方式调用 position 方法：

$("#move-it").position({
  "my": "left top",
  "at": "right bottom",
  "of": $("#target")
});

以下截图显示了前面示例中的元素作为框：

jQuery UI 有一个示例页面，您可以在其中尝试不同的位置设置，jqueryui.com/position/。

在 tooltip 的上下文中，my 参数指定 tooltip 箭头的位置。以下图表显示了 my 参数的每种配置：

tooltip 的 at 参数与 jQuery UI 的位置方法完全相同。

在 tooltip 小部件中加载 AJAX 内容

对于 tooltip，一个常用的模式是加载外部内容。Wijmo tooltip 具有用于在 tooltip 中插入内容的 ajaxCallback 选项。我们的示例向服务器发送请求并显示其响应。我们设置了链接的 data-id 属性，使其成为我们想要的内容的索引。例如，此链接指向表格中的第一个元素：

<a href="#" data-id="0">link text</a>

由于您正在向服务器发送请求，data-id 将是您正在查询的表或模型中行的主键。以下代码片段演示了如何检索 AJAX 内容：

$(document).ready(function () {
  $("a[data-id]").wijtooltip({
    position: { my: 'left bottom', at: 'right top' },
    ajaxCallback: function () {
      var $tooltip = this;
      $.get(url, { id: $tooltip.attr("data-id") }, function (text)
        {
          $tooltip.wijtooltip("option", "content", text);
      });
    }
  });
});

在 ajaxCallback 函数中，使用 $tooltip.attr("data-id") 获取与每个链接关联的 ID，它返回 data-id 属性的值。然后使用此 ID 获取提示信息内容，该内容通过 $tooltip.wijtooltip("option", "content", "text") 设置。

设计提示信息小部件

默认情况下，Wijmo 使用您选择的主题来设计提示信息，但我们要使提示信息从用户界面中脱颖而出。通过应用一些 CSS 类，我们可以快速将火箭主题的提示信息更改为自定义提示信息，如以下截图所示：

在设计提示信息时，想法是设置边框、背景和文字颜色，而不覆盖默认主题类，如 .ui-container。我们通过在提示信息类上设置颜色来实现这一点：

.wijmo-wijtooltip-container {
  color: #ffffff;
  background-color: slategray;
}
  .wijmo-wijtooltip-pointer-inner {
    border-right-color: slategray !important;
}
  .wijmo-wijtooltip, .wijmo-wijtooltip-pointer {
    border: 3px solid lawngreen;
}

.wijmo-wijtooltip-pointer-inner 类应用于气泡中的尾巴，因此我们将它的背景颜色设置为与 .wijmo-wijtooltip-container 类相同。文字颜色也在 .wijmo-wijtooltip-container 类中设置。最后，我们在提示信息和指针上设置边框颜色。

为了更容易调整颜色，我设置了提示信息自动显示，并将 closeBehavior 选项设置为 sticky。使提示信息保持粘性，使其在鼠标移出 target 元素（在这种情况下是标签）后仍然停留在页面上。完整的示例如下：

<!DOCTYPE HTML>
<html>
<head>
...

  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $("[title]").wijtooltip({
      modal: true
    });
    $("[title]").wijtooltip("option","closeBehavior","sticky");
      $("[title]").wijtooltip ("show");
    });
  </script>
  <style>
    .wijmo-wijtooltip-container {
      color: #ffffff;
      background-color: slategray;
   }
    .wijmo-wijtooltip-pointer-inner {
      border-right-color: slategray !important;
   }
    .wijmo-wijtooltip, .wijmo-wijtooltip-pointer {
      border: 3px solid lawngreen;
    }
    </style>
  </head>
<body>
  <label id="tooltip" title="tooltip"></label>
</body>
</html>

使用带有 ProgressBar 元素的上传小部件

Wijmo 的 upload 小部件可以一次性上传多个文件，并支持进度条。文件上传使用 HttpHandler 减少服务器负载。

当初始化时，上传小部件只有前面截图所示的 上传文件 按钮。一旦选择文件，上传文件用户界面将包含 上传文件 按钮以打开文件浏览器，一个 取消全部 按钮，以及一个 全部上传 按钮。每个选定的文件旁边都有一个单独的上传或取消按钮。在上传过程中，上传进度在进度条元素中显示。

我们将查看一个示例，该示例涉及在网页表单中替换文件输入，其中文件上传与表单一起提交：

<!DOCTYPE html>
<html>
<head>

...
<script id="scriptInit" type="text/javascript">
  $(document).ready(function () {
    varprogressbar = $("#progressbar");
    //Initializes the wijupload with file-input element.
    var upload = $("#upload").wijupload({
      totalUpload: function () {
      progressbar.show();
    },
    //Hide the progress-bar when upload action finished.
    totalComplete: function () {
      progressbar.fadeOut(1500, function () {
        if (supportXhr) {
          $("#progressbar").wijprogressbar("option", "value", 0);
        }
      });
    },
    //Get the total progress of wijupload and update the //progress-bar.
    totalProgress: function (e, data) {
      if (supportXhr) {
        $("#progressbar").wijprogressbar("option", "maxValue", data.total);
        $("#progressbar").wijprogressbar("option", "value", data.loaded);
        }
      },
      action: $("form").attr("action")
    });
    supportXhr = $("#upload").wijupload("supportXhr");
    if (supportXhr) {
      progressbar.wijprogressbar({ value: 0 });
    } 
    progressbar.hide();
  });
  </script>
  <style>
    #progressbar-container {
      height: 5em;
    }
    form {
      width: 800px;
    }
  </style>
</head>
<body>
  <form action="">
  <input id="upload" type="file" multiple/>
  <div id="progressbar-container">
  <div id="progressbar"></div>
  </div>
  </form>
</body>
</html>

使用 supportXhr = $("#upload").wijupload("supportXhr")，我们检查上传小部件是否可以与 AJAX 连接以显示文件上传进度。尽管进度条是隐藏的，但在 AJAX 连接可用时进度条会被初始化。

upload小部件通过三个事件处理器初始化以启用进度条。首先，当点击上传全部按钮时，会触发totalUpload事件。在这个例子中，我们显示了进度条。由于<div id="progressbar"></div>是一个空元素，调用 jQuery 的show方法不会渲染任何可见内容。接下来，当所有文件都已上传时，会触发totalComplete事件。我们淡出进度条并将其值设置为零，以便下次使用。最后，当文件正在上传时，为totalProgress定义的函数会接收到上传进度和已上传的字节数，以便在进度条中显示。上传小部件的action选项是表单在服务器上提交的 URL。

将 Wijmo 主题应用于 HTML5 视频

Wijmo 视频小部件与 HTML5 视频标签一起工作，并使用 jQuery UI 主题添加控件。视频播放器具有常见的播放/停止、音量和全屏控制。要初始化小部件，只需在视频元素上调用wijvideo方法。为了支持所有浏览器，视频元素需要至少以两种格式编码。每种格式的浏览器支持情况如下：

浏览器	MP4	WebM	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	NO	NO
Opera 10.6+	NO	YES	YES

对于不支持 HTML5 的老旧浏览器，例如 IE8，建议不要使用视频小部件。然而，你可以插入文本内容以显示视频的替代信息。完整的标记如下：

<video width="520" height="340"controls="controls">
  <source src="img/movie.mp4" type="video/mp4">
  <source src="img/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

如果你更改宽度或高度，视频会自动调整大小以适应区域。要初始化视频小部件，我们会调用$("video").wijvideo()。

使用编辑器小部件

Wijmo 编辑器允许非技术用户管理和编写 HTML 内容。与其他市场上的浏览器 HTML 编辑工具不同，Wijmo 具有类似于 Microsoft Office 2007 样式的功能区用户界面，如下面的截图所示：

功能区用户界面会自动调整大小以适应创建小部件的 textarea 维度，如前面的截图所示。它支持三种编辑 HTML 的视图。对于非技术用户，有一个WYSIWYG视图，其功能类似于 Microsoft Word。格式和布局与编辑器中看到的一模一样。此外，还有一个源代码视图，供了解 HTML 的用户使用。此外，分割视图是这两种视图的结合，以便 HTML 及其预览都可见。要初始化编辑器，只需在 textarea 上调用wijeditor方法；例如，$("#wijeditor").wijeditor({ mode: "ribbon"})。

在论坛中使用编辑器小部件与 BBCode

对于论坛和博客的使用，编辑器支持 BBCode，即如 [url=http://example.com]Example[/url] 这样的标签。如果使用 BBCode，源视图将以 BBCode 格式显示。编辑器必须在bbcode模式下初始化：

<textarea id="wijeditor" style="width: 450px; height: 200px;">Editor content</textarea>

调用 $("#wijeditor").wijeditor({ mode: "bbcode"}) 将生成一个带有 BBCode 控件的编辑器。

摘要

在本章中，我们学习了关于工具提示、上传、视频和编辑器小部件的内容。这些小部件在 Web 应用程序中常用。我们查看如何自定义工具提示样式，使其在 UI 中脱颖而出，并在其中加载 AJAX 内容。我们看到了如何使用 Wijmo 上传多个文件，同时显示进度条、视频小部件和带状风格编辑器。在下一章中，你将学习如何将 Wijmo 与 Knockout 结合使用来构建交互式用户界面。

第六章. 带有 WijmoGrid 的仪表板

使用 jQuery UI 开发丰富的客户端应用程序会导致大量的 CSS 查询选择器和事件处理器。在本章中，你将了解另一种开发交互式用户界面的方法。Wijmo 通过插件支持这种编程范式的转变。本章将帮助你开始了解这些概念。

Knockout 简介

现代 Web 应用程序通常使用 MVC 模式构建后端。那么前端呢？例如Backbone.js这样的框架会留下大量的样板代码需要编写。这在大型项目中尤为明显。这个库很轻量级，但缺乏强大的抽象。它将加载数据和 DOM 操作的任务留给了开发者。

使用ModelViewViewModel（MVVM）模式，应用程序逻辑封装在一系列 ViewModel 类中，这些类公开了一个对视图友好的对象模型。视图依赖于绑定到可观察对象来通知 ViewModel 中的变化。因此，当使用 MVVM 模式时，UI 会自动与数据刷新。MVVM 模式中的数据流在本图中展示：

从软件设计角度来看，MVVM 模式具有可测试性、关注点分离和可重用性的优势。ViewModel 不包含任何用户界面元素，这使得它易于测试。展示层保持在View中，使用 HTML 和 CSS，这需要与在ViewModel中处理业务逻辑不同的技能。ViewModel 可以在其他视图中重用，例如移动端或具有不同外观的类似应用程序。根据我自己的经验，我使用通用 ViewModel 的子类构建了两个应用程序。这两个应用程序都使用了相同的后端Model。

当在浏览器中使用 MVVM 模式时，Model 代表后端。它是对象和其上操作（创建、读取、更新、删除）的规范化数据存储的抽象。View 是用户界面，向用户显示信息并向 ViewModel 触发事件。ViewModel 从 Model 检索数据并通知 View 变化。此外，它接收来自 View 的 UI 事件并更新 Model 中的数据。

Knockout 简介

Knockout 是一个实现 MVVM 模式的 JavaScript 库。通过使用 Knockout，你可以避免使用 jQuery 进行事件处理和 DOM 操作，而是使用声明性绑定进行工作。Knockout 提供了一套丰富的绑定，用于控制文本、外观和流程。这些包括 foreach、if、visiblility 和 style 绑定。此外，还有专门用于处理表单字段的绑定。它们可以用来处理点击事件和启用或禁用 UI 元素。这些绑定绑定到 ViewModel 中的可观察对象或 observableArray 对象。当可观察对象的值发生变化时，它会发出通知。Knockout 提供了一个简单的语法来读取和写入可观察对象，正如我们将看到的。同样重要的是，Knockout 会跟踪 ViewModel 变化时需要更新的 UI 的正确部分。这意味着如果你更新了一个用 foreach 循环渲染的 observableArray 对象的项，对应的 HTML 元素也会随之改变。如果一个可观察对象是从另一个可观察对象计算得出的，那么依赖关系会为你跟踪。

让我们看看如何实例化和使用一个可观察对象。为了创建一个可观察对象，我们将其分配给 ViewModel 的一个属性。

varviewModel = {
  name: ko.observable('Bob')
};

要从可观察对象中读取，只需不带参数调用可观察对象。如果我们调用 viewModel.name()，则返回 "Bob"。要写入可观察对象，将新值作为参数传递给可观察对象。调用 viewModel.name('Jeff') 将值 Jeff 写入 name。

接下来，我们使用 data-bind 属性编写带有模板语言的视图：

My name is <span data-bind="text: name"></span>

视图初始化时具有以下相同的效果：

My name is <span>Bob</span>

最后，为了激活 Knockout，我们使用 JavaScript 将 ViewModel 层绑定到视图层：

ko.applyBindings(myViewModel);

我们可以将它放在页面底部或 DOM 就绪函数中。

使用 Knockout 构建评分系统

在本节中，我们使用 Wijmo 的评分小部件构建一个评分系统。评分系统允许用户对影响他们技术选择的因素进行投票。他们总共有 10 分可以使用。完成按钮仅在剩余可用于使用的分数有效时才启用，如下截图所示：

要构建这个评分系统，我们利用 Wijmo 的 Knockout 绑定来使用其评分小部件。调查由一组选项组成，用户对选项进行评分。对于每个选项，我们创建一个带有绑定值的答案对象：

function Answer(text) {
  this.answerText = text;
  this.points = ko.observable(1);
  this.split = ko.observable(2); // each star is split into 2 sections to allow voting by .5
}

answerText 的内容显示在 选项 标题下。评分是 重要性 标题下星星的数量。评分小部件有许多其他选项，但我们只介绍我们使用必要的那些。这些选项通过 data-bind 属性绑定到小部件：

<div data-bind="wijrating: { value: points, split: split }"></div>

在我们的 ViewModel 中，有一个名为 answers 的选项数组和一个允许的总分数，即 pointsBudget。pointsUsed 是一个依赖的可观察对象，通过将所有答案中的分数相加来计算：

function SurveyViewModel(pointsBudget, answers) {
  this.pointsBudget = pointsBudget;
  this.answers = $.map(answers, function (text) {
  return new Answer(text)
});
this.save = function () {
  alert('To do')
};

this.pointsUsed = ko.computed(function () {
  var total = 0;
  for (var i = 0; i <this.answers.length; i++)
    total += this.answers[i].points();
  return total;
}, this);

使用 jQuery 的 $.map 函数，我们可以将选项文本数组传递给 SurveyViewModel 类。第一个参数设置允许的总分数：

newSurveyViewModel(10, [
"Functionality, compatibility, pricing - all that boring stuff",
"How often it is mentioned on Hacker News",
"Number of gradients/dropshadows on project homepage",
"Totally believable testimonials on project homepage"
])

由于 Knockout 是一个 MVVM 框架，我们需要使用模板语言编写视图。为了显示选项和评分小部件，我们遍历 ViewModel 中的每个答案，并显示 answerText 字符串和每个答案的分数，如下所示：

<tbody data-bind="foreach: answers">
<tr>
  <td data-bind="text: answerText"></td>
  <td><div data-bind="wijrating: { value: points, split: split }"></div></td>
</tr>
</tbody>

将 text 绑定应用于 answerText 会显示其文本值，而 wijrating 的 value 绑定则以星星的形式显示。接下来，我们希望显示用户剩余的分数。这同样是通过 text 绑定完成的，它将数值转换为字符串：

<p>You've got <b data-bind="text: pointsBudget - pointsUsed()"></b> points left to use.</p>

我们仅在 pointsUsed 的值不超过在 SurveyViewModel 中设置的值时启用 提交 按钮。在这种情况下，它是 10。click 绑定将 SurveyViewModel 中的 save 动作分配给按钮的 click 事件：

<button data-bind="enable: pointsUsed() <= pointsBudget, click: save">Finished</button>

为了初始化用户界面，我们通过调用 ko.applyBindings 并传递一个 SurveyViewModel 对象来将 ViewModel 绑定到 HTML 上。将所有这些放在一起，评分系统只有几行 JavaScript 代码，并且没有 DOM 操作。关于本例的完整源代码，请参考 Packt 网站上提供的可下载代码包。请注意，除了常用的 Wijmo 导入之外，我们还添加了 Knockout 库和 Wijmo 绑定，其中包括 wijrating。

现在你已经知道了如何使用 MVVM 设计模式构建用户界面，我们将继续构建一个包含表单和网格的更完整的应用程序。

构建仪表板

本章的其余项目基于一个移动分页应用程序。该应用程序允许向寻呼机发送消息，并在仪表板上显示所有消息。仪表板中的消息会实时更新，并且可以按列标题排序。在实际应用中，仪表板中显示的消息将进行分页，并且对每一列的排序都会向服务器发送 AJAX 请求。Wijmo 已经有一个使用 Grid 小部件完成此操作的示例，我们也将在我们的项目中使用它。我们的项目介绍了使用 MVVM 模式设置实时消息平台的基础。数据不会持久化到数据库中。然而，表单提交会通过 WebSocket 实时发送到仪表板。完成本章后，我鼓励你查看 wijmo.com/grid-with-knockout-viewmodel-loading-remote-data/。

使用 Knockout 和 Socket.IO 发送消息

发送消息页面是一个表单，允许用户提交带有主题、正文、电话号码和消息类型的消息。我们使用 Knockout 提供的绑定和 Wijmo 提供的绑定组合来构建这个表单。首先，让我们从主题和正文开始。由于 Wijmo 的 textbox 小部件没有用于输入值的绑定，我们使用 Knockout 的value绑定。这个绑定可以用在<input>、<select>和<textarea>元素上，并将元素的值与 ViewModel 中的属性链接：

<ul class="formdecorator">
  <li>
    <h3> Subject </h3>
    <input id="text1" type="text" data-bind="value: subject"/>
  </li>

  <li>
    <h3> Body </h3>
    <textarea id="textarea1" rows="2" cols="50" data-bind="value: body"></textarea>
  </li>
</ul>

为了使这些元素使用与表单其余部分相同的样式，我们用 textbox 小部件装饰它们。这是为了样式化元素，因为 HTML 中的视图包含绑定：

$('#text1,#textarea1').wijtextbox();

在我们的 ViewModel 中，我们将subject和body字段初始化为带有空字符串的可观察对象：

varViewModel = function () {
  this.subject = ko.observable('');
  this.body = ko.observable('');
};

在看到subject和body字段是如何实现之后，你可能希望直接使用wijtextbox绑定，如下面的演示所示，但这不起作用：

<ul class="formdecorator">
  <li>
    <h3> Subject </h3>
    <input id="text1" type="text" data-bind="wijtextbox: 
      {value: subject}"/>
  </li>
  <li>
    <h3> Body </h3>
    <textarea id="Textarea1" rows="2" cols="50" databind="wijtextbox:{value: body}">
    </textarea>
  </li>
</ul>

虽然 Knockout 有value绑定，但wijtextbox绑定纯粹用于展示。有关每个绑定的支持选项列表，请参阅wijmo.com/wiki/index.php/Using_Wijmo_with_Knockout。只有页面上列出的选项支持双向绑定，而其他小部件选项仅用于初始化。在下一步中，我们使用 Wijmo 绑定来处理电话号码和消息类型表单组件：

<li>
  <h3> Phone Number </h3>
  <input data-bind="wijinputmask: 
    { text: phoneNumber, mask: '(999) 000-0000' }" />
</li>

<li>
  <h3> Message Type </h3>
  <input data-bind="wijcombobox: 
    { text: messageType, data: messageTypes }"/>
</li>

wijinputmask绑定使用模式(___) ___-____初始化一个WijmoInputMask小部件。text选项将其绑定到 ViewModel 中的phoneNumber可观察对象。wijcombobox小部件作为消息类型的下拉菜单。data选项设置messageTypes为可用。由于消息类型只读不写，我们将它放在 ViewModel 之外的范围。ViewModel 层之外的对象更改不会影响 UI。稍后，我们将 ViewModel 对象提交到服务器，将消息类型等额外数据放在 ViewModel 层之外简化了代码。Wijmo 的 ComboBox 接受一个包含标签和值的对象数组，用于数据选项。label属性是显示的文本，而value将被存储在messageType可观察对象中。

varmessageTypes = $.map(["Alpha", "Beta", "Gamma"], function (type) {
  return {label: type, value: type}
});

要将消息类型初始化为Gamma，我们在可观察对象中设置它：

varViewModel = function () {
  this.subject = ko.observable('');
  this.body = ko.observable('');
  this.messageType = ko.observable('Gamma');
  this.phoneNumber = ko.observable('');
};

最后，表单上剩下的最后一个项目是一个提交按钮，该按钮使用 WebSocket 对象将数据发送到服务器。对于这部分，我们将使用 Socket.IO。要设置 So cket.IO，从 nodejs.org/download/ 下载并安装 Node.JS，然后在命令行上运行 npm install socket.io。这将使当 Node.JS 服务器运行时，浏览器中可用的路径为 /socket.io/socket.io.js。在服务器上，Socket.IO 监听消息事件并将其广播为新闻。emit 函数向所有客户端广播，除了发送消息的那个客户端：

io.sockets.on('connection', function (socket) {
  socket.on('message', function (data) {
  socket.broadcast.emit('news', data);
  });
});

在浏览器中，通过调用 io.connect('http://localhost') 创建到 localhost 的 WebSocket 连接。submit 函数向服务器发送消息事件：

varViewModel = function () {
...
  this.submit = function () {
    socket.emit('message', ko.toJSON(viewModel));
  }
};

ko.toJSON 将 ViewModel 数据转换为 JSON。JSON 包括所有可观察项。提交按钮通过点击绑定绑定到该方法：

<li>
  <button id="Button1" data-bind="click: submit">
    Submit
  </button>
</li>

为了装饰按钮，调用 $('button').button()。jQuery UI 按钮方法以与其他小部件相同的方式样式化提交按钮。您可能会问，为什么不直接编写视图，以便在绑定中应用 jQuery UI 按钮呢？在理想的世界中，以下代码将有效：

<button id="Button1" data-bind="button: { click: submit }">
  Submit
</button>

然而，Wijmo 不支持将 click 事件绑定到按钮小部件上。因此，我们使用 Knockout 的原生 click 绑定和 jQuery UI 的 button 方法。

为了使视图层和 ViewModel 层协同工作，我们将绑定应用到 HTML 上：

varviewModel = new ViewModel();
ko.applyBindings(viewModel);

使用火箭主题，发送消息页面看起来如下截图所示：

在仪表盘上显示消息

我们为仪表盘页面创建的 ViewModel 类很简单。它由一个消息对象的 observableArray 组成。当您想要检测和响应用户对象集合中的变化时，observableArray 非常有用。由于仪表盘上的消息不可编辑，因此每个消息对象的属性不需要是可观察的。每个消息包含 subject、body、messageType 和 phoneNumber 字符串：

varviewModel = {
  data: ko.observableArray([
    {"subject": "Hi", "body": "Just a message", "messageType": "Gamma", "phoneNumber": "4128675309"}
  ])
};

当从服务器接收到更新时，消息被添加到 ViewModel 中。数据以文本形式接收，就像 AJAX 响应一样。因此，JSON.parse 方法将其转换为 message 对象：

var socket = io.connect('http://localhost');
socket.on('news', function (data) {
  viewModel.data.push(JSON.parse(data));
});

在前面的代码中，与服务器建立了一个 WebSocket 连接，允许双向通信。然而，我们只为仪表盘监听来自服务器的事件。

我们的视图层只是一个表格。Wijmo 使得显示表格数据变得如此简单，我们只需要 wijgrid 绑定以及一个基本选项 data 来使其动态化。data 选项接受一个 wijdatasource 小部件、一个数组或一个 DOM 表格作为参数。wijdatasource 可以用于从远程源动态加载数据，包括过滤和排序。由于我们的应用程序在模型中没有数据库，我们通过 observableArray 将其传递给 data 选项：

<table id="dataGrid" data-bind="wijgrid: { data: data, allowSorting: true }">
</table>

为了增强功能，allowSorting 被设置为点击列标题时按该列排序表格。wijgrid 绑定负责在 ViewModel 数据变化时更新表格。正如你现在所熟悉的，我们缺少一个将视图和 ViewModel 连接起来的关键部分：ko.applyBindings(viewModel)。这完成了仪表板的设置，结果如下截图所示：

仪表板最初只加载第一条消息。当提交 发送消息 页面时，另一条消息将被插入其下方。

摘要

Wijmo 与 Knockout 结合使用，使得编程交互式应用程序变得简单。在评分系统示例中，我们看到了从其他可观察对象计算得出的可观察对象是如何工作的。我们使用一个依赖可观察对象来计算每个评分变化时使用的总点数。在仪表板示例中，我们构建了一个由服务器使用 Wijmo 网格小部件更新的动态表格。此外，我们还编写了发送消息页面，以结合使用 Wijmo 小部件和 Knockout 绑定。下一章将介绍使用 Wijmo Mobile 进行移动网页开发。

第七章 Wijmo 移动端

在 2013 年版本中引入的适应性小部件可以在桌面和移动 Web 应用程序中使用。在本章中，我们快速浏览 Wijmo 移动端：设置、简单小部件和视图。特别是，我们关注 AppView，这是 Wijmo 的适应性超级小部件，允许您为移动和桌面浏览器使用相同的页面。

开始使用 Wijmo 移动端

在本节中，我将向您展示如何启用 Wijmo 的移动端小部件。我们通过获取 jQuery 移动端和创建小部件的步骤进行操作。Wijmo 移动端小部件是 jQuery 移动端小部件的扩展。我还解释了 jQuery 移动端在创建移动端小部件时采取的不同方法。

设置 Wijmo 移动端

由于 Wijmo 移动端是基于 jQuery 移动端构建的，我们将首先获取并安装 jQuery 移动端。

获取 jQuery 移动端

您需要将之前设置中使用的 jQuery UI 库替换为 jQuery 移动端库，该库可在jquerymobile.com/download/下载。jQuery 移动端也有类似 jQuery UI 的 Theme Roller。默认主题包含在 jQuery 移动端包中。如果您想创建自定义主题，可以在jquerymobile.com/themeroller/进行操作。

安装 jQuery 移动端

您需要将以下项目从 jQuery 移动端下载复制到lib文件夹中：

• jquery.mobile-1.3.1.min.js文件

• 用于 CSS 样式的jquery.mobile-1.3.1.min.css文件

• jQuery 移动端图标目录

一旦文件就位，就可以创建一个移动端页面。在以下代码片段中，我展示了使用 jQuery 移动端的一个示例页面的内容：

<!DOCTYPE HTML>
<HTML>
<head>
<meta name="viewport" content="width=device-width"/>
<!--jQuery References-->
<script src="img/jquery-1.9.1.js" type="text/javascript"></script>
<script src="img/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<!--Wijmo Widgets JavaScript-->
<script src="img/jquery.wijmo-open.all.3.20131.2.js" type="text/javascript"></script>
<script src="img/jquery.wijmo-pro.all.3.20131.2.js" type="text/javascript"></script>
<!--Theme-->
<link href="../lib/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<!--Wijmo Widgets CSS-->
<link href="../lib/jquery.wijmo-open.3.20131.2.css" rel="stylesheet" type="text/css"/>
<link href="../lib/jquery.wijmo-pro.3.20131.2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <div data-role="page" data-theme="b">
  <div data-role="content">
  <div data-role="header">
  <h1>Page Title</h1>
  </div>
  <div data-role="content">
  <button>Press Here</button>
  </div>
  </div>
  </div>
</body>
</HTML>

我们在这里使用的是 jQuery 移动端库，而不是 jQuery UI 库。此外，我们还用 jQuery UI 主题替换了 Wijmo Rocket 主题。

使用移动浏览器模拟器

对于本章，我们使用可在www.opera.com/developer/mobile-emulator找到的 Opera 移动端模拟器。与 iPhone 或 Android 模拟器相比，它更容易安装，并且可以模拟不同屏幕尺寸的不同设备。Opera 移动浏览器也被广泛使用并支持所有流行的平台。以下截图显示了在 Opera 移动浏览器中渲染的 jQuery 移动端页面的上一个示例：

创建一个展开小部件

展开小部件用于可折叠内容。与手风琴不同，它只有一个部分。要创建一个展开小部件，将可折叠块包裹在一个单亲元素中，并将data-role="wijexpander"属性应用到父元素上。您可以在以下示例中看到如何操作，其中只显示了body标签的内容：

<div data-role="page" data-theme="b">
<div data-role="content">
<div data-role="wijexpander">
<h3>Header</h3>

<div>
Loremipsum...
</div>
</div>
</div>
</div>

展开小部件的默认显示是块内的内容。

向展开小部件传递选项

要使展开小部件默认折叠，我们使用data-options属性并将expanded设置为false。

<div data-role="wijexpander" data-options='{ expanded: false }'>
<h3>Header</h3>

<div>
...
</div>
</div>

由于 Wijmo mobile 仍然较新，许多小部件还没有移动版本，并且一些桌面浏览器支持的功能在移动设备上不起作用。特别是，contentUrl选项在 3.20131.2 版本中不起作用，将展开方向设置为right会使 UI 看起来很混乱。在此，我们看到了通过设置data-options='{expandDirection: "right"}'来更改展开方向的示例：

创建 ListView 小部件

ListView 充当导航链接列表。jQuery mobile 应用必要的样式使列表适合移动设备。一旦点击列表项，链接内容将通过 AJAX 加载并插入到页面中。这改善了用户的感知，因为他们不会看到空白屏幕。通过将 HTML 列表的data-role属性设置为listview来创建 ListView，每个列表项都包含一个链接：

<div data-role="page">
<div data-role="content">
<ul data-role="listview" data-autodividers="true" data-theme="c">
<li><a href="http://wijmo.com/demos/">Wijmo Demos</a></li>
<li><a href="http://wijmo.com/wiki/index.php/ListView">WijmoListViewDocumentation</a></li>
<li><a href="http://jquerymobile.com/demos/1.2.0/docs/lists/docs-lists.html">jQuery Mobile Lists</a></li>
</ul>
</div>
</div>

在列表父元素上设置data-autodividers="true"，列表项将根据它们的首字母进行分类。列表项显示为带有右箭头的导航按钮，如下截图所示：

创建 AppView 小部件

WijmoAppView 创建一个响应式布局，可以适应屏幕大小。它在手机上与 ListView 的工作方式相似。在桌面和平板电脑上，列表显示在左侧，内容区域占据页面的其余部分。请注意，当使用 AppView 时，你的 jQuery mobile 和 jQuery 版本必须与使用的 Wijmo 版本兼容。在此示例中，我使用 jQuery 1.8.2，jQuery mobile 1.2.0 和 Wijmo3.20131.4。

AppView 由一个 AppView 页面和一个用于导航的 ListView 组成：

<div data-role="wijappview">
<div data-role="appviewpage">
<div data-role="header" data-position="fixed">
<h2>Title</h2>
</div>
<div data-role="content">
<h3>Content for Tablets</h3>
<p>On an tablet the AppView will result in a multi-column layout with an always visible menu. This view is optimized for tablets or even full desktop browsers. AppView will automatically use this view when running on a large enough screen.</p>
</div>
<div data-role="footer" data-position="fixed">
<h2>Footer</h2>
</div>
</div>
<div data-role="menu" class="ui-body-a">
<ul data-role="listview" data-theme="a">
  <li><a href="calendar.html">Calendar</a></li>
  <li><a href="form.html">Form</a></li>
  <li><a href="accordion.html">Accordion</a></li>
</ul>
</div>
</div>

在 AppView 页面下，页面标题使用data-role="header"元素设置，它始终显示在页面顶部。正如你可能猜到的，还有一个data-role="footer"属性，当data-position设置为fixed时，它会在页面底部显示。在前面代码中标记为data-role="content"的内容区域仅在平板电脑上显示。你可以在以下截图中看到平板电脑上的页面外观：

导航面板是一个由data-role="menu"元素包裹的 ListView 小部件。在手机上，当 AppView 加载时，只显示导航面板，如下截图所示：

要使菜单项工作，我们需要从服务器提供在href属性中设置的文件，因为它们是通过 AJAX 加载的。本章节的可下载源代码包括一个用Node.JS编写的文件服务器。

添加 AppView 页面

让我们添加日历页面并使用日历小部件初始化它。创建一个calendar.html文件，包含以下代码：

<div data-role="appviewpage" data-title="Calendar">
  <div data-role="content">
    <div id="wijcalendar" data-role="wijcalendar"></div>
  </div>
</div>

data-role="content"下的内容将在内容区域显示。在这个区域，通过在div上设置data-role="wijcalendar"来添加日历。在左上角有一个返回按钮，它返回主菜单。每次选择菜单项时都会添加此按钮。在下面的屏幕中，我选择了日历菜单项：

注意

如果示例对您不起作用，首先尝试用 CDN 上提供的样式和脚本替换：wijmo.com/downloads/#wijmo-cdn。下一步是上传您的 HTML 文件，并在论坛 wijmo.com/forums/ 上发帖提问。此外，检查 AJAX 请求，确保您的文件正在本地提供服务。

重复使用非移动页面

假设我们已经有了一个calendar.html文件。我们如何使用新的移动应用？您只需添加data-role="appviewpage",data-role="content",，并为页面上的所有小部件插入data-role="widgetname"。例如，我们可以将calendar.html替换为以下内容，同时保留对 jQuery UI 和 Rocket 主题的引用：

<!DOCTYPE HTML>
<html>
<head>
  <title>Calendar</title>
  <!--jQuery References-->
  <script src="img/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="img/jquery-ui.custom.js" type="text/javascript"></script>
  <!--Wijmo Widgets JavaScript-->
  <script src="img/jquery.wijmo-open.all.js" type="text/javascript"></script>
  <script src="img/jquery.wijmo-pro.all.3.20131.2.js" type="text/javascript"></script>
  <!--Theme-->
  <link href="../lib/jquery-wijmo.css" rel="stylesheet" type="text/css" />
  <!--Wijmo Widgets CSS-->
  <link href="../lib/jquery.wijmo-open.css" rel="stylesheet" type="text/css" />
  <link href="../lib/jquery.wijmo-pro.3.20131.2.css" rel="stylesheet" type="text/css" />
  <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
      $('#wijcalendar').wijcalendar()
    });
</script>
</head>
<body>
  <div data-role="appviewpage">
  <div data-role="content">
  <div id="wijcalendar" data-role="wijcalendar"></div>
  </div>
  </div>
</body>
</html>

我们为所需的数据角色添加了两个额外元素。您的页面可能有不同的结构，您可能只需要将data-roles属性添加到现有元素上。页面上的 JavaScript 不会执行，因为 Wijmo 忽略data-role="appviewpage"之外的所有内容。由于标题是用<title>Calendar</title>设置的，Wijmo 将其用作页面的标题，如下面的截图所示：

在桌面浏览器中，页面仍然显示日历小部件。请看下面的截图：

这非常引人注目，因为 jQuery mobile 没有类似的控件允许重复使用非移动页面。使用 WijmoAppView，不再需要单独的移动开发。

摘要

本章介绍了 Wijmo 移动小部件。与 jQuery mobile 不同，Wijmo 的自适应小部件可以在桌面和手机上使用。我们首先设置了开发环境，然后查看了一些小部件，从最简单的开始。

第八章。扩展 Wijmo

在本章中，我向您展示如何修改 Wijmo 的小部件和 CSS 样式以适应主题。您将学习如何在不覆盖现有按钮的情况下向对话框小部件添加按钮。然后，我介绍了一种修改现有 Wijmo 主题的简单方法。

扩展 Wijmo Open

Wijmo Open 是一套开源的 jQuery UI 小部件。Wijmo 小部件，如滑块、对话框或手风琴，是 jQuery UI 小部件的扩展。其他，如 Wijmo 的菜单或下拉菜单，是新的小部件。

修改对话框小部件

在 第二章 对话框小部件 中，我向您展示了如何在不更改内部结构的情况下向对话框小部件添加自定义按钮。API 很难使用，因为您必须覆盖默认按钮的图标和行为。现在，我将向您展示如何通过扩展 API 添加一个自定义按钮。首先，打开 jquery.wijmo-open.all.js 并将其重命名为 jquery.wijmo-open.all.extended.js。

当您在编辑器中打开 jquery.wijmo-open.all.extended.js 时，使用代码折叠来折叠所有代码并搜索 wijdialog。在展开 varWijDialog 这一行后，您将得到如下截图所示的视图：

所有的 Wijmo Open 小部件都以 "use strict" 开头。这启用了 ECMAScript 5 的严格语义，并允许在支持它的浏览器上更快地运行代码。让我们看看以 WijDialog.prototype 开头的那些行。所有以下划线开头的函数都是私有的，而其他的则可以通过 API 访问并已文档化。在 _createCaptionButtons 函数下，有一个包含标题栏上所有按钮的 button 对象。要向对话框标题栏添加一个 hint 按钮，我们使用与其他按钮相同的格式：

varcaptionButtons = [], self = this, o = self.options, i, buttons = {
  pin: {
    visible: true,
    click: self.pin,
    iconClassOn: "ui-icon-pin-w",
    iconClassOff: "ui-icon-pin-s"
  },
  refresh: {
    visible: true,
    click: self.refresh,
    iconClassOn: "ui-icon-refresh"
  },
  toggle: {
    visible: true,
    click: self.toggle,
    iconClassOn: "ui-icon-carat-1-n",
    iconClassOff: "ui-icon-carat-1-s"
  },
 hint: {
 visible: true,
 click: self.hint,
 message: "",
 iconClassOn: "ui-icon-lightbulb"
 },
  minimize: {
    visible: true,
    click: self.minimize,
    iconClassOn: "ui-icon-minus"
  },
  maximize: {
    visible: true,
    click: self.maximize,
    iconClassOn: "ui-icon-extlink"
  },
  close: {
    visible: true,
    click: self.close,
    iconClassOn: "ui-icon-close"
  }
}

提示

"use strict" 可能会导致您的代码出现意外行为。您可能想使用 JSHint (www.jshint.com/) 这样的工具进行检查，或者完全移除严格模式。

按钮的点击事件使用 click 选项指定。对于提示按钮，使用 self.hint。因此，我们将 hint 函数作为 WijDialog 方法编写：

WijDialog.prototype.hint = function () {
  var self = this, o = self.options;
  alert(o.message);
};

在此函数中，选项从 self.options 中读取，并在选项中设置的字符串消息用于警告框中。要使用新的提示按钮 API，我们只需设置消息选项：

$('#dialog').wijdialog({message: 'Success! You just added a title bar button.'});

一定要将 jquery.wijmo-open.all.js 脚本的引用更改为 jquery.wijmo-open.all.extended.js。

使用 ThemeRoller 修改 Wijmo 主题

要修改现有的 Wijmo 主题，请打开我们项目结构中 lib 文件夹下的 jquery-wijmo.css 文件。您可以在您的 Wijmo 下载中的 Themes 文件夹下找到更多主题。一旦打开 CSS 文件，搜索 jQuery UI CSS Framework。应该有一个如下所示的注释部分：

/*
 * jQuery UI CSS Framework 1.8.7
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=...
 */

当你在浏览器中访问链接时，ThemeRoller 会加载 Wijmo 主题。主题设置可以在左侧的 Roll Your Own 选项卡下进行修改。以下截图显示了 ThemeRoller 中加载的 Rocket 主题：

有关如何修改主题的详细信息，请参阅 wijmo.com/wiki/index.php/Wijmo_Loves_ThemeRoller:_An_Overview。

摘要

现在你已经对如何在 Wijmo 中更改事物有了概念，你将更有能力在你的项目中使用 Wijmo。通常，情况需要更改主题或小部件的行为。Wijmo 使得这些更改变得简单易行。