在微信上关注我们
Amaze UI JavaScript Components require jQuery since version 2.0. Please make sure the latest version of jQuery is loaded before Amaze UI script.
Using Amaze UI JS Components is just like using other jQuery plugins. Details can be found in documents of each component.
jQuery and Zepto.js seems to be similar, but actually they are different in detail. Supporting jQuery and Zepto.js is not that worthy to do. Maybe that's why Foundation 5 dropped Zepto. (Difference Demo listed below）
width()/height() box-sizing).padding and border)jQuery Official Explanation：
Note that
.width()will always return the content width, regardless of the value of the CSSbox-sizingproperty. As of jQuery 1.8, this may require retrieving the CSS width plusbox-sizingproperty and then subtracting any potential border and padding on each element when the element hasbox-sizing: border-box. To avoid this penalty, use.css("width")rather than.width().
Solution is using .css('width') instead of .width() in jQuery.
Well, what jQuery does here is questionable, For example, $('.box').css('height') will return 20px, Whaaaaaat the fk**?
<style>
.box {
box-sizing: border-box;
padding: 10px;
height: 0;
}
</style>
<div class="box"></div>Suppose we draw a small lovely triangle using following HTML and CSS:
<div class="caret"></div>.caret {
width: 0;
height: 0;
border-width: 0 20px 20px;
border-color: transparent transparent blue;
border-style: none dotted solid;
}.width() and .css('width') will return 0, same to height..width() returns 40, but using .css('width') returns 0px。So, in this case, use .outerWidth()/.outerHeight() in jQuery; use .width()/.height() in Zepto。
offset() top, left, width, heightwidth, height$(htmlString, attributes) $(function() {
var $list = $('<ul><li>jQuery Insertion</li></ul>', {
id: 'insert-by-jquery'
});
$list.appendTo($('body'));
});In jQuery, id won't be added to ul; In Zepto, it will。
$script = $('<script />', {
src: 'https://amazeui.github.io/amazeui/1.0.1/js/amazeui.min.js',
id: 'ui-jquery'
});
$script.appendTo($('body'));
$script.on('load', function() {
console.log('jQ script loaded');
});In jQuery, the process function of load event won't be executed; In Zepto, It will。
其他参考链接：
Amaze UI use specific HTML to bind events. Most of the JS components can be used simply by using HTML tags.
Default initialize events are all in namespace xx.amui.data-api. Developers can turn them off as their will.
Turn off all default events:
$(document).off('.data-api');Turn off default events for specific component:
$(document).off('.modal.amui.data-api');Some components provide customized events, which is named by {事件名称}.{组件名称}.amui. Read documents of components for more details.
$('#myAlert').on('close.alert.amui', function() {
// do something
});Two-way data binding is cool? Mutation Observer is (or will be) the unsung hero.
We experimentally include MutationObserver in Amaze UI 2.1 , Be careful using it.
data-am-observe After adding data-am-observe to an element, Amaze UI JS plugins that dynamiclly inserted will be automatically initiallized(Example), Supported plugins: Button、Dropdown、Slider、Popover、ScrollSpy、Tabs。
$().DOMObserve(options, callback) options: Attributes of observing(Details). Default: {childList: true, subtree: true}；callback(mutations, observer): Processing function when DOM changes. The first parameter is the array that stores MutationRecord object; the second parameter is the MutationObserver instance itself。
Example of DOM change observing. See console for log.
<p id="js-do-actions">
<button class="am-btn am-btn-primary" data-insert>Insert p element</button>
<button class="am-btn am-btn-secondary" data-addClass>Add Class</button>
<button class="am-btn am-btn-warning" data-remove>Remove p element</button>
</p>
<div id="js-do-demo">
<p>Example of DOM change observing. See console for 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('DOM of #js-do-demo is changing: ' + mutations[0].type);
});
$('#js-do-actions').find('button').on('click', function(e) {
var $t = $(e.target);
if ($t.is('[data-insert]')) {
$wrapper.append('<p>a p is inserted</p>');
} else if($t.is('[data-remove]')) {
$wrapper.find('p').last().remove();
} else {
$wrapper.addClass('am-text-danger');
}
});
})
</script>Reference：
We did an survey about front-end JS modularization, when Amaze UI was in version 1.0 . Until Nov 13th, 2014, we recieved 1869 votes：
Obviously, Modularization is the future. ES6 will have native support for modularization.
Amaze UI 2.0 follows CommonJS standard to organize modules(write modules like node.js in front-end). Developers can choose package tools they like.
SPM Can't extract dependancies from source codes. If you are are using Sea.js, you probably need to modify your package tool by yourself.
Further Reading: