Skip to content

Latest commit

 

History

History
142 lines (94 loc) · 4.46 KB

widgets.md

File metadata and controls

142 lines (94 loc) · 4.46 KB
id title titleEn permalink next
widgets
Web 组件
Web Components
widgets.html
widgets/accordion.html

Web 组件

Amaze UI Web 组件把一些常见的网页组件拆分成不同的部分，进行类似 Web Components 的封装（Web 组件简介、开发规范）。

  • 文档中提及的「云适配 WebIDE」为云适配开发的网站适配工具，详情请点击访问。
注意：Web 组件不考虑 IE 8/9 支持。

Web 组件演示

Amaze UI 目前封装了 10 余个主要面向移动端的 Web 组件（独立窗口中浏览 Demo）。

<iframe src="__M_PAGE__/widgets/m" frameborder="0" id="doc-widget-frame" frameborder="0"></iframe>

使用场景

使用模板

通过模板（hbs）将数据和 HTML 分离，这是 Web 组件的价值之一。用户可以在不同的开发环境中使用 Web 组件。

纯浏览器环境

Amaze UI 提供的开发模板中，包含一个 widget.html 文件，里面展示了 Widget 在纯浏览器环境中的使用。

要点如下：

  1. 引入 Handlebars 模板 handlebars.min.js；
  2. 引入 Amaze UI Widget helper amui.widget.helper.js；
  3. 根据需求编写模板 <script type="text/x-handlebars-template" id="amz-tpl">{{>slider slider}}</script>；
  4. 传入数据，编译模板并插入页面中。
$(function() {
  var $tpl = $('#amz-tpl');
  var source = $tpl.text();
  var template = Handlebars.compile(source);
  var data = {};
  var html = template(data);

  $tpl.before(html);
});

Node.js 环境

可以结合 Express.js、hbs 使用。

用户了可以直接使用打包好的模块 Amaze UI Widget hbs helper，example 里有完整的使用示例。

当然，你也可以自由调用：

首先，把 Web 组件的模板注册为 partial。

// ...
var hbs = require('hbs');

app.set('view engine', 'hbs');

hbs.registerPartials(widgetDir + '/slider/src');

然后， 在页面模板中调用 partial，其中 data 为组件对应的数据。

{{>slider data}}

PHP

参考以下链接：

Java

必须的 helper

无论你在上面那种环境中使用 Web 组件，都必须注册下面的 helper（我们提供的 amui.widget.helper.js 和 Node.js 模块中已经注册）:

(function(hbs) {
  hbs.registerHelper("ifCond", function(v1, operator, v2, options) {
    switch (operator) {
      case "==":
        return (v1 == v2) ? options.fn(this) : options.inverse(this);

      case "!=":
        return (v1 != v2) ? options.fn(this) : options.inverse(this);

      case "===":
        return (v1 === v2) ? options.fn(this) : options.inverse(this);

      case "!==":
        return (v1 !== v2) ? options.fn(this) : options.inverse(this);

      case "&&":
        return (v1 && v2) ? options.fn(this) : options.inverse(this);

      case "||":
        return (v1 || v2) ? options.fn(this) : options.inverse(this);

      case "<":
        return (v1 < v2) ? options.fn(this) : options.inverse(this);

      case "<=":
        return (v1 <= v2) ? options.fn(this) : options.inverse(this);

      case ">":
        return (v1 > v2) ? options.fn(this) : options.inverse(this);

      case ">=":
        return (v1 >= v2) ? options.fn(this) : options.inverse(this);

      default:
        return eval("" + v1 + operator + v2) ? options.fn(this) : options.inverse(this);
    }
})(Handlebars);

不使用模板

不使用模板似乎就失去了 Web 组件的核心价值，但有用户可能真想这么用。

这就回归到最原始的网页书写方式了：

  1. 引入 Amaze UI 的 CSS 和 JS 文件；
  2. 按照 Web 组件的模板组织 HTML（可以点击左侧菜单进入组件演示页面拷贝示例代码，当然，你也可以使用其他模板引擎，只要渲染出来的结构符合跟 Web 组件相同就行）。