新!这是 artDialog4.0.5 版..查看artDialog4新特性 (2011-07-30 14:29)
自适应内容
artDialog的特殊UI框架能够适应内容变化,因此你不必去考虑消息内容尺寸使用它。当然它仍然可以接受一个固定高宽的参数,它能够防止内容溢出或截断,同时也不会产生难看的滚动条;它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。
强大的接口
配置参数简单而强大,并且每次调用后还会返回控制接口,控制接口支持链式操作,弹出后仍然可以使用外部脚本轻控制它。
细致的体验
如果不是在输入状态,它支持Esc快捷键关闭;可吸附到触发元素附近弹出让操作更便捷;智能给按钮添加焦点;黄金比例垂直居中;预先缓存皮肤图片更快响应……
跨平台兼容
兼容:IE6+、Firefox、Chrome、Safari、Opera。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。

配置参数

一、使用传统的参数传值

art.dialog(content, yesFn, noFn)

art.dialog('简单愉悦的接口,强大的表现力,优雅的内部实现', function(){alert('yes');});

二、使用字面量传值

art.dialog(options)

var dialog = art.dialog({
    title: '欢迎',
	content: '欢迎使用artDialog对话框组件!',
	icon: 'succeed',
    follow: document.getElementById('btn2'),
    yesFn: function(){
        this.title('警告').content('请注意artDialog两秒后将关闭!').lock().time(2);
        return false;
    }
});

更多配置参数用法请查阅API文档: ./_doc/API.html#options

控制接口

需要对弹出后的对话框操作?artDialog的控制接口就是用来干这些事情的,这在异步消息操作中非常有用。

如需要用外部程序控制对话框关闭,我们可以先定义一个变量引用对话框返回值:

var testDialog = art.dialog({
    content: 'hello world!'
});

然后在可以在其他地方调用"close"方法关闭对话框:

testDialog.close();

更多控制接口用法请查阅API文档: ./_doc/API.html#API

框架应用扩展

框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情,常规情况下你必须知道框架的名称才能进行数据交换,如果是在复杂的多层框架下操作简直就是开发人员噩梦,而这样的问题在CMS多框架应用中十分常见。

在artDialog中这一切完全被简化,它有一个简单易用的数据共享接口,可以共享任意类型的数据供各个框架页面读取,它与页面名称、层级毫无关系。

art.dialog.data('test', document.getElementById('demoInput04-3').value);
art.dialog.data('homeDemoPath', './_doc/');
art.dialog.open('./_doc/iframeA.html', null, false);
// 此时 iframeA.html 页面可以使用 art.dialog.data('test') 获取到数据,如:
// document.getElementById('aInput').value = art.dialog.data('test');

请输入测试文字:

(artDialog4正式版文件没有包含此拓展,你需要另外引用 artDialog.iframeTools.js

更多静态方法用法请查阅API文档: ./_doc/API.html#plugin

jQuery + artDialog

artDialog提供了一个jQuery版本,功能与标准版一致,调用只需要把art前缀改成jQuery的命名空间。

// 普通调用
$.dialog({content:'hello world!'});

// 使用选择器方式,此时自动使用绑定了live click事件,同时启用follow模式
$('#main .test').dialog({content: 'hello world'});
特别提示:artDialog for jQuery版本需要jQuery 1.42支持,如果你使用老版本jQuery,给jQuery增加$.noop方法即可正常使用artDialog,代码:jQuery.noop = function() {};

联系

如果你对artDialog有什么意见建议可以用下面任意一种联系方式找到作者。artDialog一直在不断完善自身,这个愉悦的过程中感谢有你的参与~

提交BUG必备项:1、浏览器名称,版本 2、artDialog版本号(只支持4+版本) 3、简明扼要的描述信息 4、建议提取一份BUG DEMO,这样解决问题的概率增加300%

作者:糖饼
邮箱: (恕不提供使用问题咨询,请谅解)
网站:PlaneArt.Cn
微博:t.qq.com/tangbin

捐赠

artDialog就是你一直想要的对话框么?哇~那么我非常期待您能够热情的提供15元或者其他金额的捐赠鼓励~正如您支持其他开源项目一样。

支付宝 帐号:

您因如果使用artDialog而受益或者感到愉悦,您还可以这样帮助artDialog成长:

1、共同参与并完善artDialog或用blog/微博/Twitter把它分享它给更多的人。

2、如artDialog有幸被用在大型项目,请您联系我,我后续将在artDialog主页展示您项目/企业的LOGO(目前有phpCMS、中国电信等企业使用它)。