摇头效果

类似与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: '
"己所不欲"下一句是？
'    	+ '',    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) {
         return artDialog({        id: 'Alert',        icon: 'warning',        fixed: true,        lock: true,        content: content,        ok: true    });};/** * 确认 * @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: [            '
     
      ',                content,            '
     
',            '
     
      ',                '
      ',            '
     
'            ].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: false    })    .content('
     
      ' + content + '
     
')    .time(time || 1.5);};

调用范例：

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('成功！已经保存在服务器');