You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.8 KiB
94 lines
3.8 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>artDialog</title>
|
|
<script src="../artDialog.source.js?skin=default"></script>
|
|
<script src="../plugins/iframeTools.source.js"></script>
|
|
<style>
|
|
html, body {
|
|
height:100%;
|
|
margin:0;
|
|
padding:0;
|
|
font-size:14px;
|
|
font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial;
|
|
overflow:auto;
|
|
}
|
|
a { color: #27d; text-decoration: none; }
|
|
#doc { widows:100%; height:100%; position:relative; z-index:1; overflow:hidden;}
|
|
#sideBar { float:left; width:228px; height:100%; border-right:solid 1px #CCC; overflow:auto; }
|
|
#main {
|
|
margin-left:230px;
|
|
height:100%;
|
|
}
|
|
#main iframe {
|
|
width:100%;
|
|
height:100%;
|
|
border:none 0;
|
|
}
|
|
#main .tips { height:2em; text-indent:2em; line-height:2em; color:#FFF; background:#030; font-weight:bold; }
|
|
.sideBarWrap { padding:10px; }
|
|
#sideBar .content { margin:5px; }
|
|
#sideBar .content p { padding:0; margin:0; padding-bottom:15px; }
|
|
#sideBar .close { line-height:2em; text-align:center; background:#F4F4F4; border-bottom:1px solid #D8D8D8; color:#333; }
|
|
#photo { text-align:center; }
|
|
#photo img { margin-top:15px;}
|
|
#sideBar .nav { padding:5px; margin:15px 0; border:1px solid #D8D8D8; background:#F4F4F4; }
|
|
#sideBar .nav a { padding:1px; }
|
|
#sideBar .nav a:hover { background:#27d; color:#FFF; text-decoration:none; }
|
|
#sideBar .btns { padding-bottom:15px; text-align:center; }
|
|
.gotop { position:absolute; right:17px; bottom:60px; z-index:9; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="doc">
|
|
<div id="sideBar">
|
|
<div class="close"><a href="plugin.iframe.html" target="_blank">关闭框架查看</a></div>
|
|
<div class="sideBarWrap">
|
|
<div id="photo"></div>
|
|
<div class="nav"><a href="plugin.iframe.html#top" target="iframe">top</a> <a href="plugin.iframe.html#opener" target="iframe">opener</a> <a href="plugin.iframe.html#open" target="iframe">open</a> <a href="plugin.iframe.html#data" target="iframe">data</a> <a href="plugin.iframe.html#load" target="iframe">load</a> <a href="plugin.iframe.html#alert" target="iframe">alert</a> <a href="plugin.iframe.html#confirm" target="iframe">confirm</a> <a href="plugin.iframe.html#prompt" target="iframe">prompt</a> <a href="plugin.iframe.html#tips" target="iframe">tips</a></div>
|
|
<div class="btns">
|
|
<button id="open">iframe弹出</button>
|
|
<button id="move">移动</button>
|
|
<button id="close">关闭</button>
|
|
</div>
|
|
<div class="content">
|
|
<p>
|
|
当前页面右侧是iframe套嵌的页面。对话框可以自由穿越框架进行展示，开发者几乎无需考虑层级关系即可进行跨框架操作DOM。</p>
|
|
<p>artDialog如果要支持框架集穿越的话，需要用iframe页面套住框架集：<a href="iframe_frameset.html" target="_blank">见这里</a></p>
|
|
</div>
|
|
<input disabled id="testInput" title="testInput" type="text" />
|
|
</div>
|
|
|
|
</div>
|
|
<div id="main">
|
|
<iframe id="iframe" name="iframe" src="plugin.iframe.html"></iframe>
|
|
<a class="gotop" title="返回顶部" href="plugin.iframe.html#header" target="iframe">{top}</a>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var test, iframe = document.getElementById('iframe');
|
|
document.getElementById('open').onclick = function(){
|
|
var iframeWindow = iframe.contentWindow;
|
|
test = iframeWindow.art.dialog({
|
|
lock: true,
|
|
content: '人品极度不稳定的时刻到了！'
|
|
});
|
|
}
|
|
document.getElementById('move').onclick = function(){
|
|
test && test.position('50%', '5%');
|
|
}
|
|
document.getElementById('close').onclick = function(){
|
|
test && test.close();
|
|
test = null;
|
|
}
|
|
|
|
var _hash = window.location.hash
|
|
if (_hash) {
|
|
_hash = _hash.split('#')[1];
|
|
if (_hash) iframe.src = 'plugin.iframe.html#' + _hash;
|
|
};
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|