Amaze UI

JavaScript


基本使用

基于 jQuery

Amaze UI JavaScript 组件基于 jQuery ,使用时确保在 Amaze UI 的脚本之前引入了 jQuery 最新正式版。

组件调用

组件的调用方式普通 jQuery 插件一样,具体细节请查看各个组件的文档。

高级使用

默认初始化事件接口

Amaze UI 通过特定的 HTML 来绑定事件,多数 JS 组件通过 HTML 标记就可以实现调用。

默认的初始化事件都在 xx.amui.data-api 命名空间下,用户可以自行关闭。

关闭所有默认事件:

$(document).off('.data-api');

关闭特定组件的默认事件:

$(document).off('.modal.amui.data-api');

自定义事件

一些组件提供了自定义事件,命名的方式为 {事件名称}.{组件名称}.amui,用户可以查看组件文档了解、使用这些事件。

$('#myAlert').on('close.alert.amui', function() {
  // do something
});

MutationObserver

双向数据绑定很酷?Mutation Observer 才是(或即将成为)幕后的英雄。

Amaze UI 2.1 中实验性地引入了 MutationObserver请谨慎使用

data-am-observe

在元素上添加 data-am-observe 属性以后,动态插入该元素的 Amaze UI JS 插件会自动初始化(演示), 支持的插件包括 Button、Dropdown、Slider、Popover、ScrollSpy、Tabs。

$().DOMObserve(options, callback)

  • options: 监视的属性(具体参见),默认为 {childList: true, subtree: true}
  • callback(mutations, observer): DOM 发生变化时的处理函数,第一个参数为存储 MutationRecord 对象的数组,第二个参数为 MutationObserver 实例本身。

DOM 变化监视演示,打开控制台查看 log

<p id="js-do-actions">
  <button class="am-btn am-btn-primary" data-insert>插入 p 元素</button>
  <button class="am-btn am-btn-secondary" data-addClass>添加 Class</button>
  <button class="am-btn am-btn-warning" data-remove>移除 p 元素</button>
</p>
<div id="js-do-demo">
  <p>DOM 变化监视演示,打开控制台查看 log</p>
</div>
<script>
  $(function() {
    var $wrapper = $('#js-do-demo');
    $wrapper.DOMObserve({
      childList: true,
      attributes: true,
      subtree: true
    }, function(mutations, observer) {
      console.log(observer.constructor === window.MutationObserver);
      console.log('#js-do-demo 的 DOM 发生变化鸟:' + mutations[0].type);
    });

    $('#js-do-actions').find('button').on('click', function(e) {
      var $t = $(e.target);
      if ($t.is('[data-insert]')) {
        $wrapper.append('<p>插入了一个 p</p>');
      } else if($t.is('[data-remove]')) {
        $wrapper.find('p').last().remove();
      } else {
        $wrapper.addClass('am-text-danger');
      }
    });
  })
</script>

参考链接:

模块化开发

Amaze UI 3.0 按照 CommonJS 规范来组织模块,使用 webpack 进行打包, 使用 npm 作为包管理器。下一步的计划是使用 ES6 重构,并且 ES6 modules。