by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1248

一、些背景缘由什么的

不知道数年前，公司的前辈出于什么原因选择了MooTools库（貌似在国内不是很热），用Google趋势一搜这5个js库jQuery, mootools, YUI, dojo，extjs，结果如下图：

可怜的MooTools库垫底，但是，研究研究此库还是学到不少东西的，其OO思想，就如同JavaScript高级程序设计书中所展示的一样，基础不佳者往往很难驾驭，学习门槛高限制了其蓬勃发展啊，你看人家jQuery，即使JavaScript很初级的人也能整出点小花样，这种感觉就是——即使我很菜，我也能泡到美女，你说人家能不招人喜欢吗？//zxx:当然，阿拉也喜欢jQuery的

原先项目Mbox专门用来装载各种类型元素或HTML代码片段，与提示类的Prompt弹框是分离的，而且结构很简单。所以，最后的弹框效果比较粗糙。现在网站要大改，设计师让我先看了下弹框样式。我一琢磨，不错，比之前的好看很多很多，但是CSS代码量以及目前的弹框结构有些吐槽，而且，load类弹框和alert类弹框UI效果是一致的（而代码是两段）。显然整改的工作量比较大，加上之前使用Mbox有诸多问题，如高宽自适应能力基本上为0，内部逻辑过于复杂，很多功能对于目前这个项目不使用等因素，于是我决定把Mbox弹框和Prompt弹框整合到一起。说干就干，于是周末独自过来加班，在原插件的逻辑基础上修改，折腾了差不多2天，周一结束的时候，基本上可以使用了，各种类型的数据都可以很好的加载。但是，一个页面有多个弹框触发的情况下，参数，事情等有累积和冲突的情况，而且调用的入口有多个，逻辑过于错综复杂，IE6下的显示略显迟钝。于是做了一个决定：从头到尾按照自己的逻辑将弹框插件重写一遍。MooTools库我接触也不过几个月，不少地方还是很吃紧的，要时不时翻阅参考文档。好在，磨豆腐一样，终于用了一天半的功夫磨出来了，然后一个下午的时间调bug，修复细节，于是，全新的Mbox就这样出炉了。

我之前用jQuery写过一个轻量级弹出框插件zxxbox，貌似还是有不少人使用的，您有兴趣可以狠狠地点击这里：zxxbox jQuery弹出框插件

二、demo以及下载

您可以狠狠地点击这里：MooTools库下Mbox弹框测试demo

我已经将精简版的demo和脚本zip格式打包了，您可以狠狠地点击这里：源文件下载.zip 16.2k

如果你只对js感兴趣可以右键 – [目标|链接]另存为这里：mt.mbox.js。

三、使用

其使用要稍微比jQuery插件啰嗦些。当然，调用JavaScript文件是一样的，如下所示：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mt.mbox.js"></script>

与一般的MooTools插件不同，这里的Mbox不需要使用new运算符构造，Mbox本质上是个对象字面量，其中有个关键字叫做open，是装载元素的主要入口，所以，我们可以使用Mbox.open()来装载元素。其定义见下图：

可见open()方法有两个参数，第一个大家应该很熟悉，就是一堆API接口参数，第二个参数”from”是元素，但是这个元素不是用来装载的，而是通过其获取一些url地址的。此open()方法里面有个很强大的也是很关键url参数，可以是字符串，对象，id等，都可以，一般与type参数组合使用，见下图：

所以，我们要使用此弹框装载页面上一个id为test的元素，则代码就会如下：

Mbox.open({
    url: "test"
});

如果想直接load一个页面上没有的id为test的HTML代码，直接：

Mbox.open({
    url: '<div id="test">测试</div>'
});

这类非Ajax的加载，url是很智能的，type参数的功能很弱，但是，一旦设置了ajax:true，则type属性就很重要的，例如加载一个图片：

Mbox.open({
    url: "test.jpg",
    type: "image",
    ajax: true
});

这里的type属性如果不设成image的话，八成url会当成字符串处理了。type可选参数有：ele, image, ajax, iframe, swf, string，也就是加载元素，图片，load HTML，加载框架，加载Flash等。

Mbox的基本使用就是如此，非Ajax load和Ajax load，需要通过ajax参数声明。其他一些参数都是辅助性的非必须的，具体可以参见下一节的API参数介绍。

上面提到了一个"from"参数，如果此参数存在，且为元素(element)，options参数中的url参数会首先从此元素上获取，默认是取得此元素的href属性值，参数名是"ajaxAttr"。

除了open方法外，Mbox还有一个可以load元素的借口，方法名为"assign"，此方法直接绑定了点击事件，适用于a标签直接load元素的情况，例如：

<a id="test" href="loaded.html">assign方法绑定加载</a>

Mbox.assign($("test"), {
    type: "ajax",
    ajax: true	
});

如果a标签的href是以#开头的锚点的话，是会试图此锚点id下的页面元素的哦~~

集成弹框
我之所以花大工夫整这个插件，就是下面的功能了，当当当当，alert|confirm|remind类弹框。这些弹框的调用基本上与我的jQuery弹框插件一样，例如，alert提示框直接：

 Mbox.alert("摩西摩西，欧尼酱~~");

哇咔咔，很简单很方便吧。完整的方法以及参数如下：

Mbox.alert(message, surecall, options);

message为提示信息，必选参数，可以是HTML片段，surecall为点击确定后的回调方法，可选，如果要设置options而不需要回调，记得使用null或其他什么东东占位哦，^_^

remind方法最简单直接，其效果也最简洁，没有标题栏，没有关闭按钮，或是确定取消按钮，单纯的提示，效果如下：

插件中有个time参数，专门留给remind弹出框使用的，可以定时关闭弹框。其调用及参数如下：

Mbox.remind(message, options);

confirm询问对话框稍微复杂些，完整方法与参数如下：

Mbox.confirm(message, surecall, cancelcall, options);

其确定的回调参数是必选的，如果没有动静，弹框是不会关闭的。cancelcall可选，默认会关闭弹框。

还有一个方法就是loading。

Mbox.loading(message);

此处的message参数是可选的，默认情况就是一个loading gif动画图片和“加载中…”几个字。

一般而言，所有的Ajax load都调用了此方法，只是有时候load速度过快，看不到效果。此效果就是demo页面第三个按钮显示的效果，loading状态下，无法点击，无法关闭，只能干等，所以，必须设置load失败的回调。

此Mbox插件各个部件（标题啊，按钮什么的）类名，以及id我都写在了插件里面了，这些类名有：

您可以根据以上类名书写您想要的弹框样式。

四、API参数

参见下表：

其他我就不多说什么了。

五、算是结语吧

首先对此弹框插件的优缺点进行一些评价吧，首先是优点，在IE6下没有该死的select下拉框位于浮动层之上的问题，各类弹框并行，没有交集或是冲突之类；不足在于，没有拖拽效果，代码量也稍微多了些（相比jQuery），19K的样子。但是要比之前Mbox插件还要小，更不用说还合并了Prompt弹框的代码。一次只能打开一个弹框。

再对比jQuery谈下自己的感受吧。要说写插件，MooTools显然比jQuery的功力差好大一截，我的zxxbox插件（含有拖拽功能）未压缩大小仅12K，而且里面至少差不多1K的CSS代码，同样类似的效果，MooTools的代码量比jQuery要多50%，而且性能以及流畅度上貌似比现在的jQuery要逊色些。

//zxx:由于IE6下的动画效果实在卡的让人揪心，于是我禁掉了，也就是说，IE6下无动画效果。

jQuery为集成的JavaScript，充分利用了JavaScript的优美特性，充分挖掘潜能；MooTools更像是把JavaScript变成了其他东西，OOP化，予以改造。这对于我们的学习，子女教育等似乎都有启示意义。

熟悉了MooTools库后发现这也是款很优秀的插件，其自带的cookie方法，自带很多字符串，数组处理方法，其键盘事件的键值处理也很独到，但是其本身过于冰冷的感觉阻碍了其发展。

//zxx:我最近在把MooTools插件jQuery化，让像getProperty这些方法直接变成jQuery的attr等诸如此类。让后来的新人也能在jQuery习惯下使用MooTools库。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1248

（本篇完）