artDialog强大的弹出层插件

artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口

自适应内容: artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。
完善的接口: 它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。
细致的体验: 如果不是在输入状态，它支持Esc快捷键关闭；可指定在元素附近弹出，让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应……
跨平台兼容: 兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。

快速入门

一、使用传统的参数

art.dialog(content, ok, cancel)

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

二、使用字面量传参

art.dialog(options)

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

摇头效果

类似与wordpress登录失败后登录框可爱的左右晃动效果

// 2011-07-17 更新
artDialog.fn.shake = function (){
	var style = this.DOM.wrap[0].style,
		p = [4, 8, 4, 0, -4, -8, -4, 0],
		fx = function () {
			style.marginLeft = p.shift() + 'px';
			if (p.length <= 0) {
				style.marginLeft = 0;
				clearInterval(timerId);
			};
		};
	p = p.concat(p.concat(p));
	timerId = setInterval(fx, 13);
	return this;
};

调用示例：

var dialog = art.dialog('抖一抖');
dialog.shake && dialog.shake();// 调用抖动接口

右下角滑动通知

artDialog.notice = function (options) {
	var opt = options || {},
		api, aConfig, hide, wrap, top,
		duration = 800;
		
	var config = {
		id: 'Notice',
		left: '100%',
		top: '100%',
		fixed: true,
		drag: false,
		resize: false,
		follow: null,
		lock: false,
		init: function(here){
			api = this;
			aConfig = api.config;
			wrap = api.DOM.wrap;
			top = parseInt(wrap[0].style.top);
			hide = top + wrap[0].offsetHeight;
			
			wrap.css('top', hide + 'px')
				.animate({top: top + 'px'}, duration, function () {
					opt.init && opt.init.call(api, here);
				});
		},
		close: function(here){
			wrap.animate({top: hide + 'px'}, duration, function () {
				opt.close && opt.close.call(this, here);
				aConfig.close = $.noop;
				api.close();
			});
			
			return false;
		}
	};	
	
	for (var i in opt) {
		if (config[i] === undefined) config[i] = opt[i];
	};
	
	return artDialog(config);
};

调用示例：

art.dialog.notice({
	title: '万象网管',
    width: 220,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
    content: '尊敬的顾客朋友，您IQ卡余额不足10元，请及时充值',
    icon: 'face-sad',
    time: 5
});

简单交互对话框

注意：artDialog iframeTools扩展已经包含这些扩展了

/**
 * 警告
 * @param	{String}	消息内容
 */
artDialog.alert = function (content, callback) {
	return artDialog({
		id: 'Alert',
		icon: 'warning',
		fixed: true,
		lock: true,
		content: content,
		ok: true,
		close: callback
	});
};


/**
 * 确认
 * @param	{String}	消息内容
 * @param	{Function}	确定按钮回调函数
 * @param	{Function}	取消按钮回调函数
 */
artDialog.confirm = function (content, yes, no) {
	return artDialog({
		id: 'Confirm',
		icon: 'question',
		fixed: true,
		lock: true,
		opacity: .1,
		content: content,
		ok: function (here) {
			return yes.call(this, here);
		},
		cancel: function (here) {
			return no && no.call(this, here);
		}
	});
};


/**
 * 提问
 * @param	{String}	提问内容
 * @param	{Function}	回调函数. 接收参数：输入值
 * @param	{String}	默认值
 */
artDialog.prompt = function (content, yes, value) {
	value = value || '';
	var input;
	
	return artDialog({
		id: 'Prompt',
		icon: 'question',
		fixed: true,
		lock: true,
		opacity: .1,
		content: [
			'<div style="margin-bottom:5px;font-size:12px">',
				content,
			'</div>',
			'<div>',
				'<input value="',
					value,
				'" style="width:18em;padding:6px 4px" />',
			'</div>'
			].join(''),
		init: function () {
			input = this.DOM.content.find('input')[0];
			input.select();
			input.focus();
		},
		ok: function (here) {
			return yes && yes.call(this, input.value, here);
		},
		cancel: true
	});
};


/**
 * 短暂提示
 * @param	{String}	提示内容
 * @param	{Number}	显示时间 (默认1.5秒)
 */
artDialog.tips = function (content, time) {
	return artDialog({
		id: 'Tips',
		title: false,
        cancel: false,
		fixed: true,
		lock: true
	})
    .content('<div style="padding: 0 1em;">' + content + '</div>')
	.time(time || 1);
};

调用范例：

art.dialog.alert('人品越来越不那么稳定了，请检查！');

art.dialog.confirm('你确定要删除这掉消息吗？', function () {
	art.dialog.tips('执行确定操作');
}, function () {
	art.dialog.tips('执行取消操作');
});