向应用程序中添加对 Wijmo 5 的引用

为了在应用程序中使用 Wijmo 5,通过添加几个引用至 HTML 页面即可。

发布于 2017/02/23 00:00

WijmoJS

为了在应用程序中使用 Wijmo 5,通过添加几个引用至 HTML 页面即可。

 

一个 Wijmo 5 应用程序所依赖的最小的文件集如下:

  • wijmo.js: 包含 Wijmo 5 的基础架构,包括: GlobalizeEventControl, 以及 CollectionView 类。
  • wijmo.css: 包含全部 Wijmo 5 控件样式的 CSS 规则。

除此之外,还需要添加一个或多个的额外文件,取决于您需要用到哪一个组件:

  • wijmo.grid.js: 包含 FlexGrid 控件。
  • wijmo.chart.js: 包含 FlexChart 以及 FlexPie 控件。
  • wijmo.input.js: 包含若干输入类控件,包括 ComboBoxAutoCompleteInputDateInputTimeInputNumberInputMaskListBoxMenu, 以及 Calendar 控件。
  • wijmo.gauge.js: 包含一些仪表盘控件,包括 LinearGaugeRadialGauge, 以及 BulletGraph
  • angular.js: 谷歌的 AngularJS 框架,是所有 AngularJS 应用程序所必须的依赖项。
  • wijmo.angular.js: 包含允许您直接在标记语言中使用 Wijmo 5 控件的 AngularJS 指令。
  • wijmo.culture.[CultureName].js: 包含支持特定文化的文件,用做开发 支持美国英语之外语言的应用程序。
  • wijmo.theme.[ThemeName].css: 包含用作自定义 Wijmo 5 控件外观的 CSS 规则。

对于引用文件的实际位置,您可以有两种选择。您既可以将 Wijmo 下载到本地,并复制所必须的文件到您的 应用程序内合适的文件夹,也可以引用托管在云上的 Wijmo 文件,位于我们的内容分发网络(CDN)。 以下章节演示了一些示例。

将 Wijmo 在本地部署

下载 Wijmo 文件并将其复制到您应用程序所在的某个文件夹内。 假设您将 Wijmo 脚本文件放置在一个叫做 “scripts/vendors” 的文件夹内,同时 css 文件位于 “styles” 文件夹, 则您可以向 HTML 页面添加以下代码行:

<!-- Wijmo 引用 (必需) -->
<script src="scripts/vendor/controls/wijmo.min.js" type="text/javascript"></script>
<link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<!-- Wijmo 控件(可选,包含您所需要的控件) -->
<script src="scripts/vendor/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js" type="text/javascript"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js" type="text/javascript"></script>
<!-- Wijmo 自定义主题(可选,包含您所喜爱的主题) -->
<link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet" type="text/css" />
<!-- Wijmo 自定义 Culture(可选,包含您所希望支持的 Culture) -->
<script src="scripts/vendor/controls/cultures/wijmo.culture.ja.min.js " type="text/javascript"></script>
<!-- AngularJS 以及 Wijmo 指令(可选,AngularJS 应用程序支持) -->
<script src="scripts/vendor/angular.min.js" type="text/javascript"></script>
<script src="scripts/vendor/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>

以 CDN 的方式部署 Wijmo

在这种场景下,您不需要下载任何内容。仅需要简单地将以下代码行添加到 HTML 页面:

<!-- Wijmo 引用 (必需) -->
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/5.20142.15/styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<!-- Wijmo 控件(可选,包含您所需要的控件) -->
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.chart.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.gauge.min.js" type="text/javascript"></script>
<!-- Wijmo 自定义主题(可选,包含您所喜爱的主题) -->
<link href="http://cdn.wijmo.com/5.20142.15/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet" type="text/css" />
<!-- Wijmo 自定义 Culture(可选,包含您所希望支持的 Culture) -->
<script src="http://cdn.wijmo.com/5.20142.15/controls/cultures/wijmo.culture.ja.min.js " type="text/javascript"></script>
<!-- AngularJS 以及 Wijmo 指令(可选,AngularJS 应用程序支持) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>
 

CDN 上部署的版本将会在屏幕右下角显示 Wijmo 5 水印元素。 如果您不希望显示该水印,则您必须像上面提到的那样,通过本地部署的方式使用 Wijmo。

注意:引用的添加顺序非常重要。 wijmo.js 模块必须是第一个出现,之后是控件模块,控件扩展, 然后 wijmo.angular 模块应当包含在最后。

 

如果你对Wijmo5感兴趣,可以到如下链接下载:

/download/?pid=54

更多资源:

Wijmo中文官网:/developer/wijmojs

Wijmo5在线示例:/developer/wijmojscore

Wijmo5产品文档:/developer/wijmojscore

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html

 

更多文章请参考Wijmo5技术文章汇总

WijmoJS | 下载试用

WijmoJS 是一款基于 HTML5 的前端开发工具包,由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成,如表格(Grid)、图表(Chart)、数据分析(Olap)、导航(Navigation)和金融图表等,完美兼容原生 JavaScript,以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

为顺利推进您的产品选型,推荐如下方式,加速产品评估进度:

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态