常用前端交互插件之artDialog

javascript

链接

v6版本: https://aui.github.io/artDialog/
v4版本: http://lab.seaning.com/

使用

使用技巧

1. 所有回调函数,返回false对话框就不关闭,返回true对话框就关闭;也可以直接写true,false;也可以放空,放空就会真;

2. 使用传统的参数

art.dialog('显示内容', 回调函数);

3. 使用字面量传参

var dialog = art.dialog({
    //内容:
    title: '欢迎',
    content: '欢迎使用artDialog对话框组件！',
    /*
     1.如果没有就为loading动画;
     2.可以直接写html标签,也可以把页面上的html元素弄上来,如果该元素以前为display:none,就会自动转换为display:block;
     */
    //按钮:
    icon: 'succeed',
    follow: document.getElementById('btn2'),
    ok: function(){
        this.title('警告').content('请注意artDialog两秒后将关闭！').lock().time(2);
        return false;
    }
    /*
     0.使用此参数由确定按钮;
     1.按确定就会触发此函数;
     2.函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果返回true就直接关闭窗口,不回调;
     */
    cancel: function(){
        alert('取消回调');
        return false;
    }
    /*
     1.同上
     2.不过按x关闭也会回调;
     */
});
okVal:"确定按钮的文字",
    cancelVal:"取消按钮的文字",
    button:[{name: '登录', callback: function () {}}, {name: '取消'}]
/*
 1.js数组形式;
 2. 
 配置参数成员：
 name —— 按钮名称
 callback —— 按下后执行的函数
 focus —— 是否在当前按钮聚焦点
 disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态)
 */
//尺寸:
width:"500px",//宽度,默认自适应,可设百分比,如设百分比的话,就是当前宽度的百分比;
    height:"500px",//高度
    //位置:
    fixed:true //开启静止定位,静止在浏览器某个地方不动，也不受滚动条拖动影响;
follow:document.getElementById('dialog'),//让对话框依附在指定元素附近,可直接传入元素ID名称，注意ID名称需要以“#”号作为前缀  
    left:"80%" //相对于可视区域的X轴的坐标,可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整
top:"50%" //同上;
//视觉:
lock:true,//开启锁屏[遮罩层],默认不开启,
    background:'#000', //遮罩层颜色,默认黑色
    opacity:0.7, //遮罩层透明度
    icon:"success", //定义消息图标,可定义“skins/icons/”目录下的图标名作为参数名（不包含后缀名);
    padding:"20px 25px", //内容与边界填充边距,写法和css一样;
    //交互:
    time:2,//设置对话框显示时间。以秒为单位
    resize:true,//是否允许用户调节尺寸,默认true
    drag:true,//是否允许用户拖动位置,默认true
    esc:true,// 是否允许用户按Esc键关闭对话框,默认true
    //高级:
    id:"#one",//设定对话框唯一标识
    /*
     1、防止重复弹出
     2、定义id后可以使用art.dialog.list[youID]获取扩展方法
     */
    zIndex:'1988',//重置全局zIndex初始值。默认1987
    init:function(){},//对话框弹出后执行的函数
close:function(){},//对话框关闭前执行的函数
/*
 1.函数如果返回false将阻止对话框关闭
 2.请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。
 */
show:function(){},// 是否显示对话框
//扩展方法:
close():关闭对话框
show(): 显示对话框
hide(): 隐藏对话框
title(value):写入标题。无参数则返回标题容器元素
content(value):向消息容器中写入内容。参数支持字符串、DOM对象，无参数则返回内容容器元素
button(arguments):参考上面
follow(element):参考上面
position(left, top):参考上面
size(width, height): 重新设定对话框大小
lock():     锁屏
unlock():解锁
time(val):定时关闭（单位秒）
/*
 1.回调函数中的this可以使用这些方法;
 */
//列子:
1.创建右下角菜单,固定,禁拖动,禁改大小;
art.dialog({
    id: 'msg',
    title: '公告',
    content: 'hello world!',
    width: 320,
    height: 240,
    left: '100%',
    top: '100%',
    fixed: true,
    drag: false,
    resize: false
})
2.直接引用返回:
    var dialog = art.dialog({
        title: '我是对话框',
        content: '我是初始化的内容'
    });
dialog.content('对话框内容被扩展方法改变了').title('提示');
3.通过对话框ID:
    art.dialog({
        id: 'KDf435',
        title: '警告',
        content: '我是初始化的内容'
    });
art.dialog.list['KDf435'].content('对话框内容被扩展方法改变了');
4.关闭页面所有对话框:
    var list = art.dialog.list;
for (var i in list) {
    list[i].close();
};
5.标题倒计时:
    var timer;
art.dialog({
    content: '时间越来越少，越来越少..',
    init: function () {
        var that = this, i = 5;
        var fn = function () {
            that.title(i + '秒后关闭');
            !i && that.close();
            i --;
        };
        timer = setInterval(fn, 1000);
        fn();
    },
    close: function () {
        clearInterval(timer);
    }
}).show();