artDialog使用方法

最新推荐文章于 2021-01-08 09:26:45 发布

changuncle

最新推荐文章于 2021-01-08 09:26:45 发布

阅读量2.1w

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xiaouncle/article/details/52096612

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

引用js文件，注意引用顺序：

<script type="text/javascript" src="/Scripts/artDialog/artDialog.js"></script>
<script type="text/javascript" src="/Scripts/artDialog/plugins/iframeTools.js"></script>

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

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

字面量参数版art.dialog
content不仅仅可以是普通字符串，也可以是一个隐藏的页面。

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

<script type="text/javascript">
    function ShowAlertDiv() {
        art.dialog({
            title: "提示框",
            content: $("#alertDiv")[0],
            icon: "succeed",
            lock: true,
            fixed: true,                
            okVal: "ok",
            ok:function() {alert("ok了！");},
            cancelVal: "cancel",
            cancel:function() {alert("cancel了！");}
        });
    }
    function Trigger() {
        alert("弹出页中的按钮触发了点击事件！");
    }
</script>
<body>
    <form id="form1" runat="server">
    <div id="alertDiv" hidden="hidden">
        <input type="checkbox" id="ckb1"/>recursive
        <input type="checkbox" id="ckb2"/>consistent
        <input type="checkbox" id="ckb3"/>impact
        <input type="button" value="点击" onclick="Trigger()"/>
    </div>
    <input type="button" onclick="ShowAlertDiv()" value="弹出页面"/>
    </form>
</body>

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属性"
    });
});

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

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

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

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

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

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

art.dialog.notice()

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

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

function OpenFunc() {
    art.dialog.open("Login.aspx", {
        title: "登录",
        lock: true,
        width: 400,
        height: 300
    },true);
}

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

跨页面传值，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>