jancy2265

easyDialog 简单、实用的弹出层组件

  1. 使用背景

    1. 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的、最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找到了本文的主角
      • easyDialog组件
  2. 简介

    1. 相比于layer其js+css+img组合下69KB的大小,该组件普通版仅6.6KB大小,压缩的min版本则仅2KB大小,且能够直接将代码从js文件复制至HTML的script代码块中

    2. 该组件v1.0版本发布于2011-03-23,发布于当时作者的个人网站http://stylechen.com/easydialog.html,遗憾的是该域名目前一般作者挂牌出售,源码我也是在jq22中下载获取,其2.0版本貌似已经发布,但无法找到

    3. 目前README.md地址:https://www.jq22.com/jquery-info7721

      1. 概述

        easyDialog没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。

      2. 其他说明见上述网页

      3. 免注册下载地址:https://gitee.com/jancy2265/easy-dialog/raw/master/easyDialog%20v1.0.zip

  3. 删除我个人认为不需要的功能

    1. 删除ecs关闭弹出层的功能

      1. 主版本删除:删除以下代码即可

        // ESC键关闭弹出层
        doc.onkeyup = function(e){
            e = e || window.event;
            if(e.keyCode === 27) base.close();
        };
        
      2. min版本删除:删除以下代码即可

        l.onkeyup=function(r){r=r||window.event;if(r.keyCode===27){b.close()}}
        

相关文章: