# artDialog

## 实验

这里是一些实验性的扩展，或许它们哪天消失也说不定。要注意：它们并没有整合在artDialog主文件里面。

### 摇头效果

类似与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({
        content: '<p>"己所不欲"下一句是？</p>'
        	+ '<input id="demo-labs-input" style="width:15em; padding:4px" />',
        fixed: true,
        id: 'Fm7',
        icon: 'question',
        okVal: '回答',
        ok: function () {
        	var input = document.getElementById('demo-labs-input');

        	if (input.value !== '\u52ff\u65bd\u4e8e\u4eba') {
                this.shake && this.shake();// 调用抖动接口
                input.select();
                input.focus();
                return false;
            } else {
                art.dialog({
                	content: '恭喜你，回答正确！',
                    icon: 'succeed',
                    fixed: true,
                    lock: true,
                    time: 1.5
                });
            };
        },
        cancel: true
    });

    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('执行取消操作');
    });

    art.dialog.prompt('请输入图片网址', function (val) {
    	art.dialog.tips(val);
    }, 'http://');

    art.dialog.tips('数据正在提交..', 2);
    // [more code..]
    art.dialog.tips('成功！已经保存在服务器');