artDialog

artDialog是一个基于javascript编写的对话框组件

  基本使用： 

var dialog = art.dialog({

    title: '欢迎',

    content: '欢迎使用artDialog对话框组件！',

    icon: 'succeed',

    follow: document.getElementById('btn2'),

    ok: function(){

        return false;

    }

});

参数：

title：              标题内容

content：        消息内容

ok：1.Function               确定按钮回调函数。

        2.Boolean               函数如果返回false将阻止对话框关闭；函数this指针指向内部api；

                                       如果传入true表示只显示有关闭功能的按钮

cancel: 1.Function:          取消按钮回调函数。

             2.Boolean           函数如果返回false将阻止对话框关闭；函数this指针指向内部api；

                                        如果传入true表示只显示有关闭功能的按钮

                                        对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不同罢了，点击同样触发                                        cancel事件

回调函数this指向扩展接口，如果返回false将阻止对话框关闭

art.dialog({

    content: '如果定义了回调函数才会出现相应的按钮',

    ok: function () {

    this.title('3秒后自动关闭').time(3);

        return false;

    },

    cancelVal: '关闭',

    cancel: true //为true等价于function(){}

});

lock:   Boolean                开启锁屏。中断用户对话框之外的交互

time:  Number                 设置对话框显示时间。以秒为单位

id:       String                   设定对话框唯一标识。用途：

           Number                       1、防止重复弹出

                                               2、定义id后可以使用art.dialog.list[youID]获取扩展方法

init:    Function                 对话框弹出后执行的函数

close: Function                对话框关闭前执行的函数。函数如果返回false将阻止对话框关闭。

                                        请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。

 

扩展方法：

close()：                   关闭对话框

show()：                   显示对话框

hide()：                    隐藏对话框

title(value)：             写入标题。无参数则返回标题容器元素

content(value)：       向消息容器中写入内容。参数支持字符串、DOM对象，无参数则返回内容容器元素

lock()：                     锁屏

unlock()：                解锁

 

如在ajax异步操作中，我们可以先定义一个变量引用对话框返回的扩展方法：

var myDialog = art.dialog();// 初始化一个带有loading图标的空对话框

jQuery.ajax({

    url: 'http://web5.qq.com/content?id=1',

    success: function (data) {

        myDialog.content(data);// 填充对话框内容

    }

});

如果需要使用程序控制关闭，可以使用"close"方法关闭对话框：

myDialog.close();