artDialog使用



本文转自：http://blog.csdn.net/xiaouncle/article/details/52096612

传统参数版art.dialog 
art.dialog(content,ok,cancel)，参数：弹出框中的内容，点击“确定”按钮触发的事件，点击“取消”按钮触发的事件

art.dialog("artDialog", function () {
    alert("点击了确定按钮");
}, function () {
    alert("点击了取消按钮");
});
   
   
1
2
3
4
5
   
   
1
2
3
4
5

字面量参数版art.dialog

$("#btnArtDialog2").click(function () {
    art.dialog({
        title: "蝈蝈",
        content: "字面量传参",
        //以“skins/icons/”目录下的图标名作为参数名（不包含后缀名）
        icon: "succeed",
        lock: true,//是否锁定屏幕，默认是false
        fixed: true,//静止在浏览器某个地方不动，不受滚动条拖动影响
        time: 3,//如果有cancel方法的话会调用cancel方法
        okVal: "ok",
        ok: function () { alert("ok了"); },
        cancelVal: "cancel",
        cancel: function () { alert("cancel了"); }
    });
});
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

follow属性的使用

$(document).ready(function () {
    //点击按钮时能弹出有跟随效果的提示框
    //效果同简写形式的follow效果一样
    $("#btnArtDialog3").click(function () {
        art.dialog({
            follow: document.getElementById('btnArtDialog3'),
            title: "跟随效果",
            content: "follow属性"
        });
    });
    //不用点击按钮就会弹出有跟随效果的提示框
    art.dialog({
        follow: document.getElementById('btnArtDialog3'),
        title: "跟随效果",
        content:"follow属性"
    });
    //点击按钮的时候会出现有跟随效果的提示框
    art('#btnArtDialog3').dialog({
        title: "跟随效果",
        content: "简写形式的follow属性"
    });
});

   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

art.dialog.alert(content,ok)，参数：弹出框的内容，用户点击“确定”按钮后执行的回发事件

$("#btnAlert").click(function () {
    art.dialog.alert("alert弹出框", function () {
        art.dialog.alert("点击确定按钮触发的事件");
    });
});
   
   
1
2
3
4
5
   
   
1
2
3
4
5

art.dialog.confirm(content,ok,cancel)，参数：弹出框中的内容， 
点击“确定”按钮触发的事件，点击“取消”按钮触发的事件

$("#btnConfirm").click(function () {
    art.dialog.confirm('confirm弹出框', function () {
        art.dialog.alert("点击确定按钮触发的事件");
    }, function () {
        art.dialog.alert("点击取消按钮触发的事件");
    });
});
   
   
1
2
3
4
5
6
7
   
   
1
2
3
4
5
6
7

art.dialog.prompt(content,ok(data),defaultValue)，参数：弹出框中的内容， 
点击“确定”按钮触发的事件，data表示用户输入的内容，输入框的中默认值

function PromptFunc() {
    art.dialog.prompt('prompt弹出框', function (data) {
        art.dialog.alert("data=" + data);
    }, "请输入");
}
   
   
1
2
3
4
5
   
   
1
2
3
4
5

art.dialog.notice()

function NoticeFunc() {
    art.dialog.notice({
        title: '蝈蝈',
        // 必须指定一个像素宽度值或者百分比，
        //否则浏览器窗口改变可能导致artDialog收缩
        width: 220, 
        content: '尊敬的顾客朋友，您IQ卡余额不足10元，请及时充值',
        icon: 'face-sad',
        time: 5
    });
}
   
   
1
2
3
4
5
6
7
8
9
10
11
   
   
1
2
3
4
5
6
7
8
9
10
11

art.dialog.open(url,options,cache)，参数: 地址, 配置参数, 缓存开关(默认true)

function OpenFunc() {
    art.dialog.open("Login.aspx", {
        title: "登录",
        lock: true,
        width: 400,
        height: 300
    },true);
}
   
   
1
2
3
4
5
6
7
8
   
   
1
2
3
4
5
6
7
8

art.dialog.data(key,value)，参数：键、值

function SetValue() {
    //设置键值对
    art.dialog.data('test', $('#demoInput').val());
}
function GetValueFunc() {
    //根据键的名称获取对应的值
    var data = art.dialog.data('test');
    art.dialog.alert("data=" + data);
}
   
   
1
2
3
4
5
6
7
8
9
   
   
1
2
3
4
5
6
7
8
9

跨页面传值，art.dialog.open与art.dialog.data组合使用 
artDialog.aspx与iframeA.htm互相传值

//artDialog.aspx中的方法
<script type="text/javascript">
function OpenAndDataFunc() {
    art.dialog.data('test', $('#demoInput').val());
    var dialog = art.dialog.open('iframeA.htm', {
        title: "iframeA",
        lock: true,
        width: 400,
        height: 300,
        close: function () {
            //获取由iframeA.htm页面传递过来的数据
            var data = art.dialog.data('fromIFrameA');
            art.dialog.alert("data=" + data);
        }
    }, false);
    //将弹出框设为键值对形式，在iframeA.htm中获取到该弹出框后，
    //可以将其关闭
    art.dialog.data("iFrameADialog", dialog);
}
</script>

//iframeA.htm中的代码
<script type="text/javascript">
if (art.dialog.data('test')) {
    // 获取由artDialog.aspx页面传递过来的数据
    document.getElementById('aInput').value = 
    art.dialog.data('test'); 
};
document.getElementById('btnSetValue').onclick = function () {
    alert($('#aInput').val());
    art.dialog.data('fromIFrameA', $('#aInput').val());
};
// 关闭并返回数据到主页面artDialog.aspx
document.getElementById('exit').onclick = function () {
    var origin = art.dialog.open.origin;//来源页面
    //获取来源页面第二种写法
    //var origin = artDialog.open.origin;
    var aValue = document.getElementById('aInput').value;
    var input = origin.document.getElementById('demoInput');
    var iFrameADialog = art.dialog.data('iFrameADialog ');
    //给来源页面中id=demoInput的控件赋值
    input.value = aValue;
    //选中id=demoInput的控件
    input.select();
    //关闭弹出框的两种方式
    //art.dialog.close();//【方法一】
    iFrameADialog .close();//【方法二】
};
</script>
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49