easyDialog 简单、实用的弹出层组件
easyDialog 简单、实用的弹出层组件
-
使用背景
- 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的、最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找到了本文的主角
- easyDialog组件
- 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的、最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找到了本文的主角
-
简介
-
相比于layer其js+css+img组合下69KB的大小,该组件普通版仅6.6KB大小,压缩的min版本则仅2KB大小,且能够直接将代码从js文件复制至HTML的script代码块中
-
该组件v1.0版本发布于2011-03-23,发布于当时作者的个人网站
http://stylechen.com/easydialog.html
,遗憾的是该域名目前一般作者挂牌出售,源码我也是在jq22中下载获取,其2.0版本貌似已经发布,但无法找到 -
目前
README.md
地址:https://www.jq22.com/jquery-info7721-
概述
easyDialog没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。
-
其他说明见上述网页
-
免注册下载地址:https://gitee.com/jancy2265/easy-dialog/raw/master/easyDialog%20v1.0.zip
-
-
-
删除我个人认为不需要的功能
-
删除
ecs
关闭弹出层的功能-
主版本删除:删除以下代码即可
// ESC键关闭弹出层 doc.onkeyup = function(e){ e = e || window.event; if(e.keyCode === 27) base.close(); };
-
min版本删除:删除以下代码即可
l.onkeyup=function(r){r=r||window.event;if(r.keyCode===27){b.close()}}
-
-