artDialog使用

桃扇骨 2022-07-12 13:07 186阅读 0赞

本文转自：[http://blog.csdn.net/xiaouncle/article/details/52096612][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

[http_blog.csdn.net_xiaouncle_article_details_52096612]: http://blog.csdn.net/xiaouncle/article/details/52096612