使用artDialog创建各种炫酷弹出框

来源：互联网发布：大数据与云计算知乎编辑：程序博客网时间：2024/06/05 13:29

artDialog4.x版本下载地址在这里：http://www.daimajiayuan.com/download/201304/yulan/artDialog4.1.7/index.html

artDialog5.x版本下载地址在这里：https://github.com/aui/artDialog

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

自适应内容

artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。

完善的接口

它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。

细致的体验

如果不是在输入状态，它支持Esc快捷键关闭；可指定在元素附近弹出，让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应……

跨平台兼容

兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。

今天我给大家就简单演示几个大家常用的。

摇头效果

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

以上演示及核心内容，均摘自官网。你也可以忽略笨博客，直接前往官方网站。

0 0