artDialog使用方法
引用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="点击" οnclick="Trigger()"/>
</div>
<input type="button" οnclick="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>
---------------------
作者：changuncle
来源：CSDN
原文：https://blog.csdn.net/xiaouncle/article/details/52096612