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参数中的ur参数会首先从此元素上获取,默认是取得此元素的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我都写在了插件里面了,这些类名有:
类名 | 表示含义 |
---|---|
mbox_win | 最外框 |
mbox_bar | 标题栏 |
mbox_close | 关闭按钮 |
mbox_cont | 装载内容的div |
mbox_operate | 集成弹框按钮所在的父div |
mbox_btn_sure | 确认按钮 |
mbox_btn_cancel | 取消按钮 |
mbox_alert | alert弹框内容外框 |
mbox_confirm | confirm弹框内容框 |
mbox_remind | remind弹框内容框 |
mbox_loading | 加载中loading弹框内容外框 |
mbox_loading_image | 加载中图片类名 |
mbox_ajax_image | ajax加载的图片 |
mbox_ajax_iframe | ajax加载的框架 |
您可以根据以上类名书写您想要的弹框样式。
四、API参数
参见下表:
参数名 | 默认值 | 含义注释 |
---|---|---|
marginImage | { x: 50, y: 75 } | x,y键值对象,加载图片,尺寸溢出屏幕时的边缘距离 |
width | "auto" | 字符串,或是px为单位的整数值,默认"auto",表宽度自动 |
height | "auto" | 字符串,或是px为单位的整数值,默认"auto",表宽度自动 |
url | false | 可以是元素,id选择器,字符串,指用来load的元素的地址或元素本身 |
type | "ele" | 加载的元素的类型,可选参数有:ajax, string, iframe, image, swf |
ajax | false | 是否是Ajax加载元素,如果为true,会调用loading加载中提示框,且会严格进行type类型判断 |
ajaxAttr | "href" | 通过其他元素获取url时的属性值,默认为href,暗指a标签,也可以是其他自定义的属性 |
ajaxOptions | {} | ajax发送参数,只有当type类型为"ajax"时此参数才有用 |
title | "提示框" | 标题栏的默认提示文字 |
ensure | "确定" | 确认按钮上的文字 |
cancel | "取消" | 取消按钮上的文字内容 |
clostxt | "×" | 关闭按钮上的文字 |
loadimg | "http://www.zhangxinxu.com/study/image/loading.gif" | 加载中的图片地址 |
overlay | true | 是否显示半透明背景层,默认为true,表示显示 |
opacity | 0.35 | 半透明背景层的透明度 |
hasShim | true | 是否IE6下iframe填隙 |
overlayClosable | false | 点击半透明背景层是否关闭弹框 |
reposition | true | 弹框是否位置居中固定,如果为false,子弹框跟随页面滚动,无重定位 |
closable | true | 是否显示关闭按钮,remind等提示框此参数无效,注定不显示 |
titleable | true | 是否显示标题栏,remind等提示框注定不显示,alert、confirm弹框显示 |
optable | false | 是否显示默认的删除取消按钮,默认是不显示的,alert、confirm弹框死活显示 |
zIndex | 999 | 层级 |
time | 0 | 定时关闭弹框的时间,只对remind弹框有效,大于0的整数参数合法有效 |
useFx | false | 是否使用动画。动画效果体现在弹框显示以及重定位的时候。false为无动画。 |
openFrom | null | 页面上元素,动画效果的起始位置,以该元素为起点。仅初次弹出时有效。 |
resizeFx | {} | 额外需要的动画相关的参数 |
onShow | $empty | 弹框显示时的回调函数 |
onClose | $empty | 弹框关闭时的回调函数 |
其他我就不多说什么了。
五、算是结语吧
首先对此弹框插件的优缺点进行一些评价吧,首先是优点,在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
(本篇完)
- CSS相对定位|绝对定位(五)之z-index篇 (0.365)
- jQuery boxy弹出层对话框插件中文演示及讲解 (0.343)
- 新版无图片版zxxbox jQuery弹出框插件 (0.343)
- 仿新浪微博返回顶部的js实现(jQuery/MooTools) (0.306)
- jQuery图片文本滚动切换插件jCarousel中文翻译与详解 (0.197)
- textField - jQuery文本域操作集插件展示 (0.197)
- 关于锚点跳转及jQuery下相关操作与插件 (0.179)
- MooTools下简易自定义滚动条小插件 (0.179)
- MooTools和jQuery库继承实现class切换对比 (0.160)
- js页面滚动时层智能浮动定位实现(jQuery/MooTools) (0.160)
- jQuery-实现图片的放大镜显示效果 (RANDOM - 0.033)