为了在应用程序中使用 Wijmo 5,通过添加几个引用至 HTML 页面即可。
一个 Wijmo 5 应用程序所依赖的最小的文件集如下:
- wijmo.js: 包含 Wijmo 5 的基础架构,包括: Globalize, Event, Control, 以及 CollectionView 类。
- wijmo.css: 包含全部 Wijmo 5 控件样式的 CSS 规则。
除此之外,还需要添加一个或多个的额外文件,取决于您需要用到哪一个组件:
- wijmo.grid.js: 包含 FlexGrid 控件。
- wijmo.chart.js: 包含 FlexChart 以及 FlexPie 控件。
- wijmo.input.js: 包含若干输入类控件,包括 ComboBox, AutoComplete, InputDate, InputTime, InputNumber, InputMask, ListBox, Menu, 以及 Calendar 控件。
- wijmo.gauge.js: 包含一些仪表盘控件,包括 LinearGauge, RadialGauge, 以及 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感兴趣,可以到如下链接下载:
更多资源:
Wijmo中文官网:/developer/wijmojs
Wijmo5在线示例:/developer/wijmojscore
Wijmo5产品文档:/developer/wijmojscore
如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html