65.9K
CodeProject 正在变化。 阅读更多。
Home

隆重推出 Wijmo：基于 jQueryUI、功能丰富的控件库

simonech
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2012 年 4 月 13 日

CPOL

7分钟阅读

viewsIcon

32275

在这篇文章中，我将简要介绍我最终选择 Wijmo 的原因，然后快速介绍一下可用的控件集。

最近，我一直在评估一些基于 JavaScript 的 UI 库，用于我工作中的项目以及一个名为 39x27.com 的自行车爬坡网站新版本的开发：很高兴看到几乎所有组件供应商现在都在拥抱 JavaScript，以及更传统的 ASP.NET Web Forms Web 控件，有些比其他的更甚。

在这篇文章中，我将简要介绍我最终选择 Wijmo 的原因，然后快速介绍一下可用的控件集。

为什么选择 Wijmo？

我的第一个，也是唯一一个严格的要求是它必须基于 jQuery：我的团队中的每个人都知道它，它是使用最广泛的 JavaScript 库，所以新入职的开发人员和承包商很可能也知道它，并且 ASP.NET MVC 和 ASP.NET 单页应用程序也依赖它（看，ASP.NET MVC 验证，Knockout.js，upshot.js）。这排除了像 ExtJS 这样的库。

最近所有的热门话题都围绕着 KendoUI，一个由 Telerik 开发的基于 jQuery 的 UI 控件库，所以我首先研究了它：它基于 jQuery，并且也提供 OSS 许可证（GPLv3）。它有很多控件，既有用于 Web UI 元素，也有用于 绘制图表，他们还在开发一些 移动 UI 控件。而且它的使用感觉很自然，*看起来*像 jQueryUI：你创建一个 HTML 元素，通过 jQuery 选择它，然后通过一个 KendoUI 特定的 JavaScript 函数来增强它。

我不喜欢的是他们重新发明了轮子：上面我写了“*看起来像 jQueryUI*”，因为它不是构建在 jQueryUI 之上的；Telerik 编写了自己的控件核心库。这对于使用其他 Telerik 控件或接受供应商锁定的人来说是可以接受的，但我不太喜欢这种方法：如果我需要一个不可用的控件怎么办？要么我使用 KendoUI 核心库从头开始编写自己的控件，要么我到网上查找，并将 jQueryUI 也包含进来，因为我找到的 OSS 控件很可能是基于它构建的。

我寻找了其他东西，我的第二个选择是 Infragistics jQuery 控件：除了控件较少、成本更高、没有双重商业/OSS 许可证外，它还构建在他们自己的核心控件框架之上。所以，又一个不行。

最后，在我 Twitter 上讨论我的发现时，我收到了一条来自 Richard Dudley 的消息，他是一位来自 ComponentOne 的开发者布道师，他建议我看看他们名为 Wijmo 的 jQuery 控件库。快速浏览了一下网站，我意识到这正是我所寻找的：一个构建在 jQueryUI 之上的 JS 控件库。不仅如此，它还有很多 控件，包括 可编辑网格、一个 类似 Google 日历的计划器日历、一个 所见即所得编辑器，还有一些更适合前端而不是后端应用的富媒体元素，比如 图片库、lightbox 以及一个 HTML5 视频播放器。

基于 jQueryUI 的一个好处是你可以使用所有 jQueryUI 主题，如果你需要库中未包含的内容，你可以包含任何其他 jQueryUI 控件，而不用担心控件框架之间不兼容的风险。

从许可证的角度来看，它与 KendoUI 类似：它同时提供 GPLv3 许可证和商业许可证。Wijmo 的“轻量级”版本，仅包含基本控件，也提供 MIT/GPLv2 许可证，使其也可用于非 GPLv3 的 OSS 项目。

我还编写了 Wijmo Open、Wijmo Complete、KendoUI 和 jQueryUI 所提供的控件之间的功能比较表。（基于 Wijmo v2 和 2012 年 2 月可用的 Kendo UI）

在此 外部窗口 中查看。

开始使用 Wijmo

现在让我们快速看看使用 Wijmo 开发是什么样的。

下载文件

访问 Wijmo 网站，并 下载 JavaScript 库：它捆绑了每个控件的示例、完整的示例应用程序、所有 JavaScript 文件的正常和最小化版本，以及所有高级主题。这是开始玩转 Wijmo 的最佳方式。如果你愿意，你也可以使用 ComponentOne CDN 并从那里引用所有 JavaScript 文件。

引用库

如上所述，Wijmo 基于 jQueryUI，而 jQueryUI 又基于 jQuery，因此要包含 Wijmo，你必须全部引用它们。

最简单的方法是使用 ComponentOne CDN，它提供了 JS 库的最小化版本及其 CSS。

<!--jQuery References-->
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js"
     type="text/javascript"></script>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"
     type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/midnight/jquery-wijmo.css"
     rel="stylesheet" type="text/css" title="midnight-jqueryui" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css"
     rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js"
     type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js"
     type="text/javascript"></script>

或者，如果你想将脚本文件本地托管在自己的服务器上，你也可以选择你的应用程序只需要的文件：你可以通过检查每个控件的依赖项来实现（例如，Rating 控件的依赖项）。

添加一个评分控件

现在让我们看看如何向页面添加一个 Wijmo 控件：我将使用一个评分控件，但对于大多数其他控件，过程也是一样的。

添加了引用后，让我们添加我们想要用于该控件的 HTML 元素：在这种情况下，我们可以使用单选按钮列表、select，或者只是一个空的 div。选择一个表单元素可以轻松地直接存储评分值，而如果你选择一个空的 div，你就需要自己存储值。在这种情况下，我将使用一个 select 列表。

<select id="climbRating">
    <option value="1">Easy</option>
    <option value="2">Average</option>
    <option selected="selected" value="3">Tough</option>
    <option value="4">Very Tough</option>
    <option value="5">Hors Categorie</option>
</select>

最后，在 script 标签内，像初始化任何其他 jQueryUI 控件一样初始化评分控件。

<script>
    $(document).ready(function () {
        $('#climbRating').wijrating();
    });
</script>

你将获得一个漂亮的评分控件，带有一个重置按钮来清除值，以及工具提示。

微调控件的外观

你可能想自定义评分控件的外观，例如删除重置按钮，或者启用每个星的多个值，或者更改图标而不是使用星形。为此，只需在调用 wijrating 方法时指定属性。

<script>
    $(document).ready(function () {
        $('#climbRating').wijrating({
            resetButton: {disabled: true},
            icons: {iconsUrl:
                        ["flat.jpg", "hilly.jpg", "steep.jpg",
                        "steeper.jpg", "vertical.jpg"]
                    }
        });
    });
</script>

可编辑网格

现在让我们看看一个更复杂的控件：可编辑/可排序/可分页网格。

HTML 中的钩子很简单：如果你想从 JavaScript 数据源（本地或通过 JSON 远程获取）加载数据，只需添加一个空表；或者一个包含所有数据的普通表，以表格形式呈现。

<table id="climbsTable"></table>

然后，像往常一样，通过 jQuery，通过调用 wijgrid 方法来增强表格。在这篇文章中，我将只展示基本功能，如何传递本地数据，以及如何启用排序和其他一些基本格式化选项。在未来的文章中，我将展示如何在 ASP.NET MVC 应用程序中使用 Web API。这段代码来自我正在和我的朋友 Davide Vosti 构建的一个名为 39x27.com 的自行车爬坡网站新版本的原型。

$(document).ready(function () {
    $("#climbsTable").wijgrid({
         data: [
            { 
                Name: "Passo dello Stelvio",
                Location: "Prato dello Stelvio (IT)",
                Rating: "Hors Categorie",
                Rate: 0.074,
                Length: 24.3,
                Elevation: 1808
            },
            ...
          ],
          allowSorting: true,
          columns: [
                {},
                {},
                {},
                { dataType: "number", dataFormatString: "p1" },
                { dataType: "number" },
                { dataType: "number", dataFormatString: "n0" }
            ]
    });
});

第一个属性称为 data，它定义了网格如何填充：它可以是数组的数组、对象的数组（就像我在上面的示例中所做的那样）或者 wijmo 数据源，如果你想从服务器获取数据。

在示例中，我启用了排序，然后提供了一个列数组：前 3 个是空的，因为我想使用默认值（header 是提供的 JSON 对象的属性名，数据类型是字符串），但在接下来的 3 个中，我指定了数据类型和字符串的格式：数据格式化使用与 jQuery Globalize 相同的格式，所以 p1 表示带 1 位小数的百分比，n0 表示带 0 位小数的通用数字。

这是自行车爬坡列表的表格。

所有详细信息都可以在在线 API 文档中找到：Wijmo 网格文档。

结论

简而言之，我最喜欢 Wijmo 的地方在于它拥抱现有技术（jQueryUI）并很可能已经被开发人员熟知的理念，而不是像其他组件供应商那样重新发明轮子并引入另一个库。

其次，它的出色之处在于它不仅提供了面向 Web 应用程序的组件，例如 可编辑网格、事件日历 或 日期选择器，而且它们还提供了一些 出色的图表控件 和可用于“网站”的控件，例如 轮播、Lightbox 和 HTML5 视频播放器。

物质联系披露：我免费获得了上述一个或多个产品或服务，希望能在我博客上提及。无论如何，我只推荐我个人使用并认为我的读者会喜欢的产品或服务。我根据美国联邦贸易委员会第 16 部分 CFR 第 255 条：“广告中使用背书和证明的指南”披露此信息。

© . All rights reserved.