雨夜带刀's Blog

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

easyDialog没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。当然,如果你想找那种集成了模板的弹出层,请移步artDialog,artDialog的模板设计得很精美,功能也是很丰富的,但是体积比较大,压缩后的体积还是有18KB,如果是注重性能的网站,一个弹出层组件有这么大至少对于我来说是没法容忍的,在某些情况下优点恰恰也成了缺点,easyDialog始终保持着超轻量级。

easyDialog不依赖框架,使用起来很简单,只要引入easydialog.js文件就可以使用了:

// 引入easyDialog

比如想弹出一个id为box的消息框,那么只需将id以字符串的形式传进去即可:

easyDialog.open({
	container : 'box'
});

关闭弹出窗口,只要调用关闭的方法即可:

easyDialog.close();

这是最简单的调用,container参数也是必须要有的,默认就是弹出的消息框下面有遮罩层,并且是相对于页面静止定位并垂直居中。如果想实现其他的效果且看下面的参数说明。

参数说明:

  • container string
  • 弹出层内容的id,该参数是必填项。
  • isOverlay boolean
  • 是否添加遮罩层,true为添加,false为不添加,默认是true。
  • fixed boolean
  • 是否相对于页面静止定位,true为静止,false为不静止,默认是ture。
  • follow string&object
  • 弹出层跟随自定义元素来定位,参数可以是id也可以是Dom对象。
  • followX number
  • 相对于跟随元素的X轴偏移,和follow参数同时使用。
  • followY number
  • 相对于跟随元素的Y轴偏移,和follow参数同时使用。
  • autoClose number
  • 自动关闭弹出层,单位为毫秒,默认为0,不自动关闭。
  • callback function
  • 关闭弹出层时执行的回调函数,默认为null。

查看演示:http://stylechen.com/wp-content/uploads/demo/easydialog/
online casino

下载:http://stylechen.com/wp-content/uploads/download/easydialog.zip

4月15日更新至1.5,更新内容如下:

1. 修正在某些特殊情况下IE6的判定不准确的问题;

2. 新增DOM树加载的机制,在head标签中也可以引用easyDialog.js文件(无特殊情况,最好是在底部引用);

3. 对源码进行一些优化;

8月30日更新至2.0:http://stylechen.com/easydialog-v2-0.html

原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/easydialog.html
如需转载请以链接形式注明原载或原文地址。

“easyDialog 简单、实用的弹出层组件”目前已有 33 条评论

发表评论:

  • *
  • *
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。