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();

猜你喜欢

转载自mr-lee11.iteye.com/blog/2341371