artDialog v 2.0.4 Beta

简介

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

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

优点

  1. 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
  2. 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮),并且支持消息框大小拖动调节
  3. 智能消息对齐: 如果设置了对话框宽度,文本会自动居中或者居左对齐
  4. 容错: 如果定义的宽度高度小于内容大小不会出现错位,
  5. 智能定位: 使用自定义坐标的时候智能修正位置,确保其在可视范围 (适用于弹出菜单)
  6. 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
  7. 轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)
  8. 制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。
  9. IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果
  10. IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)
接口

配置参数

  • content: {消息内容,支持HTML}
  • title: {标题.默认:'提示'}
  • lock: {是否锁定屏幕. 默认:false}
  • width: {宽度,支持em等单位. 默认:'auto'}
  • height: {高度,支持em等单位. 默认:'auto'}
  • url: {iframe地址,存在content参数时候,此参数无效}
  • x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
  • y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中,而是使用的黄金比例)}
  • fixed: {是否启用静止定位. 默认:false}
  • time: {多少秒自动关闭}
  • style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
  • yesText: {确定按钮文本. 默认:'确定'}
  • noText: {取消按钮文本. 默认:'取消'}
  • yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}
  • id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2',则内容容器id为'my2Content'}

形式

artDialog({ 配置参数 }, function(){ 确定按钮回调函数 }, function(){ 取消按钮回调函数 }, function(){ 对话框关闭回调函数 }) 如:

artDialog(
        {	
            content:'欢迎你来到对话框世界!',
            lock:true,
            style:'succeed noClose'
        },
        function(){
            alert('你点了确定');
        },
        function(){
            alert('你点了取消');
        }
);
演示

风格:

作者

artDialog 的设计目标是尽量用CSS与合理的XHTML架构方案解决复杂的兼容问题,提供更为简易的皮肤制作机制,通过切换皮肤以适应更多的交互界面,如下拉菜单、广告、照片幻灯、播放器等。

artDialog v2相对v1版本有很大的提升,在多窗口支持上借鉴了popbox的方法。

artDialog v2在解决半透明皮肤支持IE6 (png 32)的时候加载了iepngfix。

如果发现问题或者建议请给我发电子邮件。如果你对代码进行了优化,那也请您不吝给我一份吧,让它变得更好。

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

唐斌, 长期关注于界面与用户体验,欢迎与我交流:  个人站点: www.planeArt.cn

firebug