95 lines
3.8 KiB
HTML
95 lines
3.8 KiB
HTML
<!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>
|