首页 > 前端代码 > javascript对话框(弹出层)组件artDialog

javascript对话框(弹出层)组件artDialog

artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验。

演示地址:http://www.planeart.cn/downs/artDialog/

项目主页:http://code.google.com/p/artdialog/

artDialog2采用全新的UI

功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤、穿越框架

优点:

兼容主流浏览器:支持IE6和IE6+, Firefox, chrome, Opera, Safari

自适应内容:无需预设高宽, 对话框自适应消息内容的大小 (包括按钮),并且支持消息框大小拖动调节智能消息对齐:如果设置了对话框宽度,文本会自动居中或者居左对齐

容错:如果定义的宽度高度小于内容大小不会出现错位,

智能定位:使用自定义坐标的时候智能修正位置,确保其在可视范围 (适用于弹出菜单)

拖动流畅:不会粘住鼠标也不会拖出浏览器视口导致无法控制

轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)

制订皮肤:九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。

IE6无抖动静止定位:在IE6下可实现与现代浏览器一样完美静止定位效果

IE6遮盖下拉控件支持:支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)

附带皮肤:

google chrome[支持ie6覆盖下拉控件]

facebook[只用了一张不到1k的背景图]

更新的调用方式

artDialog 改为 art.dialog

url 改为 iframe

(2.1版能兼容旧版本的调用方式。建议使用新的调用方式,下一版不再兼容<1.0.9)

新增加的功能

增加menuBtn参数, 支持让对话框在指定元素附近弹出(菜单模式)

增加同域下自适应iframe内容的大小

新增加一个’data’的接口,它保存了每次创建的消息容器对象

优化的功能

锁屏的时候改用js屏蔽页面滚动功能,取消原来CSS隐藏滚动条,防止页面偏移

对超过预设面积大小的对话框拖动自动采用替身的方式,以求拖动更流畅

给确定按钮增加Ctrl + Enter快捷键(如果内容有表单),锁屏的时候支持tab与方向键切换按钮焦点

如果对话框高度超过浏览器视口的一半高度则不使用黄金比例垂直居中

锁屏的时候屏蔽了键盘操作刷新、Tab切换(只在对话框中可用)与全选

如果有取消按钮回调函数,关闭按钮的回调函数也将与其相同

当出现多个对话框时顶层的对话框使用不同的样式

让Esc键关闭最高层对话框

拖动的时候自动清除选中的文本

让IE6支持覆盖下拉控件的同时也支持透明皮肤

支持简写: art.dialog(‘我是消息’)

优化锁屏渐变动画

取消的功能

剔除对话框关闭后回调函数,如果需要使用请使用内置扩展方法

剔除鸡肋参数’parent’,框架相互调用请用javascript原生方法

剔除IE6对使用了png皮肤样式自动修复支持

剔除了坐标定位的’center’关键字,不填写则默认居中

修复的错误

修复Chrome特定情况下出现的iframe错位问题

修正2.0.8版本后锁屏不兼容Safari的问题

修复Firefox调大对话框拖帧的现象

修复拖动对话框时候可能因鼠标置入iframe窗口而导致鼠标被粘住的问题

修复了特定情况下导致定义了ID的对话框无法弹出

修复一处隐秘BUG:当使用Ctrl+回车提交表单并弹出对话框时导致弹出新窗口

修复了IE7创建的iframe可能出现边框线的小问题

修复范围限制函数没有生效的错误

修复一处笔误,忘记声明变量导致泄漏出去污染全局

artDialog2.1.1 下载

默认皮肤aero提供psd源文件

文章作者: 风羽
本文地址: http://www.phoyu.com/divcss/javascriptduihuakuangdanchucengzujianartdialog.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

javascript对话框(弹出层)组件artDialog》上有 11 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>