6
之前做JS接触到的大多是dojo,jquery,prototype,WZ之流,多少存在一些问题。
直到接触JOOMLA,发现里面有些很酷的效果,而且性能也很好才发现都是幕后功臣motools也是个不错的东东。
MOTOOLS
特点介绍:
- style非常干净,采用后期事件注入的方式。页面上全是class
- 对变形效果支持好,这是MOTOOLS的核心功能
- 调用方便,写的代码非常少,而且分离很好
- 完全的oop风格
核心feature:
Accordion:文字卷帘,可以在一页显示多页信息,点击标签卷帘收缩展开
customEvent:1.对mouse wheel的支持,2. 可以定义全局的特殊方法,比如enter事件的处理,然后做控件-方法绑定即可,使用继承方式来获得系统事件,例如:keyenter 就是原来的系统事件
Element.Events.keyenter = {
base: ‘keyup’,
condition: function(e){
// We can basically put any logic here.
// In this example we return true, when the pressed key is the
// Enter-Button so the keyenter event gets fired.
return e.key==’enter’;
}
};
绑定过程也非常简单
$(’myElement’).addEvent(’keyenter’, function(e){
// We can do everything here: submitting a form, sending an AJAX-Request and so on
// because it only fires when the user presses the Enter-Button
e.stop();
// But instead we only change the text of an element.
$(’myDivElement’).set(’text’, ‘You pressed enter’).highlight();
});
SORT/Dynamic Sortables排序
支持drag and drop 的排序。而且item可以runtime 生成
EFFECT:渐变变形/MOTOOLS 精髓
还记得JOOMLA酷酷的黑色弹出框吗?其实那在MOTOOLS不过是一DIV变型,
MOTOOLS支持的变形有morph,erase,tween,start
包括变长度,变颜色,变透明度,位置移动,或者甚至CSS的改变,可贵的是motools支持的全部都是渐变的动画效果
Slide:
变形的衍生功能,可以收缩控件做出某种slide效果,
Mouseenter和Mouse leave:加强的mouseenter和mouse leave,javascript的mouse enter 和leave 一直不太好用,要么不调,要么反复掉,现在MOTOOLS把它增强了。
Json/Ajax:仍然是很干净很简单的style来支持ajax
更多精彩请看源码!我已经把motools的sample一一下载并打包上传了,点击这里下载!