amazeui学习笔记--js插件(UI增强)--警告框Alert

amazeui学习笔记--js插件(UI增强)--警告框Alert

一、总结

1、警告框基本样式用am-alert声明div容器

<div class="am-alert">
没什么可给你,但求凭这阙歌。谢谢你风雨里,都不退愿陪着我。
</div>

2、警告框关闭按钮data-am-alert应该是js事件,因为点击后面的关闭按钮真的可以关闭掉

<div class="am-alert" data-am-alert>
<button type="button" class="am-close">&times;</button>
<p>没什么可给你,但求凭这阙歌。谢谢你风雨里,都不退愿陪着我。</p>
</div>

3、不同状态(颜色)am-alert-warning,还是之前几种颜色,只不过现在是用alert做模块名,<div class="am-alert am-alert-warning" data-am-alert>警告框内容</div>

4、通过data API调用警告框:在 Alert 最外层元素上添加 data-am-alert

<div class="am-alert" data-am-alert>
<button type="button" class="am-close">&times;</button>
...
</div>

5、通过js开启关闭按钮交换功能:  $('.am-alert').alert()

  • $().alert() - 激活 Alert 元素关闭按钮的交互功能
  • $().alert('close')直接关闭元素
6、通过js自定义警告框事件:
事件名称 描述
close.alert.amui close 方法被调用时立即触发
closed.alert.amui 元素被关闭以后触发(CSS 动画执行完成)
$('#my-alert').on('closed.alert.amui', function() {
alert('警告窗口已经关闭');
});
 
 
 

二、警告框Alert

JavaScript


基本使用

基于 jQuery

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

组件调用

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

jQuery 和 Zepto.js 的一些差异

jQuery 和 Zepto.js 表面看起来差不多,其实一些细节上差异很大,同时支持 jQuery 和 Zepto.js 是一件吃力不讨好的事情,这应该也是 Foundation 5 放弃支持 Zepto 的一个原因。(下面列举的差异 Demo

width()/height()

  • Zepto.js: 由盒模型(box-sizing)决定
  • jQuery: 忽略盒模型,始终返回内容区域的宽/高(不包含 paddingborder

jQuery 官方的说明

Note that .width() will always return the content width, regardless of the value of the CSS box-sizingproperty. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css("width") rather than .width().

解决方式就是在 jQuery 中使用 .css('width'),而不是 .width()

这点上 jQuery 的处理方式是值得商榷的,比如下面的例子,$('.box').css('height') 仍然返回 20px,这不是扯蛋么:

 Copy
<style>
.box {
box-sizing: border-box;
padding: 10px;
height: 0;
}
</style> <div class="box"></div>
边框三角形宽高的获取

假设用下面的 HTML 和 CSS 画了一个小三角形:

 Copy
<div class="caret"></div>
 Copy
.caret {
width: 0;
height: 0;
border-width: 0 20px 20px;
border-color: transparent transparent blue;
border-style: none dotted solid;
}
  • jQuery 使用 .width() 和 .css('width') 都返回 0,高度也一样;
  • Zepto 使用 .width() 返回 40,使用 .css('width') 返回 0px

所以,这种场景,jQuery 使用 .outerWidth()/.outerHeight();Zepto 使用 .width()/.height()

offset()

  • Zepto.js: 返回 topleftwidthheight
  • jQuery: 返回 widthheight

$(htmlString, attributes)

DOM 操作区别
 Copy
$(function() {
var $list = $('<ul><li>jQuery 插入</li></ul>', {
id: 'insert-by-jquery'
});
$list.appendTo($('body'));
});

jQuery 操作 ul 上的 id 不会被添加;Zepto 可以在 ul 上添加 id

事件触发区别
 Copy
$script = $('<script />', {
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js',
id: 'ui-jquery'
}); $script.appendTo($('body')); $script.on('load', function() {
console.log('jQ script loaded');
});

使用 jQuery 时 load 事件的处理函数不会执行;使用 Zepto 时 load 事件的处理函数会执行。

其他参考链接:

高级使用

默认初始化事件接口

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

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

关闭所有默认事件:

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

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

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

自定义事件

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

 Copy
$('#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 实例本身。
 Copy

插入 p 元素 添加 Class 移除 p 元素

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 1.0 的时候曾做过一个关于前端 JS 模块化的调查,截止 2014.11.13 共 1869 个投票:

  • CMD - Sea.js 23.86% (446 votes)
  • AMD - RequireJS 24.51% (458 votes)
  • CommonJS - Browserify 9.58% (179 votes)
  • 其他加载工具(或者自行开发的) 8.19% (153 votes)
  • 什么是 JS 模块化?可以吃吗? 34% (633 votes)
CMD
AMD
CJS
other
unknown

显然,模块化是必然趋势,ES6 将原生支持模块化。

Amaze UI 2.0 按照 CommonJS 规范来组织模块(前端也像 Node.js 一样编写模块)。最终如何打包,用户可以自行选择。

  • Browserify:结合 NPM,实现前端模块管理。很多前端模块都已经发布到 NPM,可以抛弃 Bower 这类功能很单一的工具了;
  • Duo:除管理本地模块以外,还可以从 GitHub 上直接获取开源项目,支持 Javascript、HTML、CSS;
  • gulp-amd-bundler:把按照 CJS 编写的模块打包成 AMD 模块;
  • Webpack

SPM 貌似不支持直接通过源码提取依赖,使用 Sea.js 的用户可能需要自行修改打包工具。

建议阅读的文章:

上一篇:项目实例——多表关联查询判断A的字段是否在B中,在显示该字段值,不在显示空;B的字段是否在C中,在显示该字段值,不在显示空。


下一篇:Oracle安装配置流程