码迷,mamicode.com
首页 > 其他好文 > 详细

左边导航 右边分屏 框架实现

时间:2020-05-25 15:49:58      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:删除   method   mes   span   add   play   相关   ash   messages   

左边导航,点击右边 跳转对应页面

实现:

技术图片

 

 

CCC2.html    #主框架代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据操作平台</title>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
display: flex;
}
.left {
flex: 0 0 200px;
padding: 10px;
margin: 0;
}
.left li {
cursor: pointer;
}
.left li:hover {
color: blue;
}
.right {
flex: 1;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<ul class="left">
<li class="item" frameSrc="{{ url_for(‘FenLan‘) }}">B2C落地页_数据操作</li>
<li class="item" frameSrc=#>第二个iframe</li>
<li class="item" frameSrc=#>第三个iframe</li>
<li class="item" href=#>第三个iframe</li>
</ul>
<iframe src="a.html" frameborder="0" class="right"></iframe>
</div>
<script>

window.onload = function () {
var items = document.getElementsByClassName(‘item‘)
var iframe = document.getElementsByClassName(‘right‘)[0]
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
iframe.src = this.attributes[1].value
}
}
}
window.onload
</script>
</body>
</html>

 

右侧页面 框架 all.html

<html>

<frameset rows="25%,50%,25%">

<frame src="{{ url_for(‘Check‘) }}" noresize="noresize">   #禁止分屏 拖动 添加 
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">

</frameset>

</html>

 

右侧 第一个视图

<style type="text/css">
div.pos_left
{
position: absolute;
top:40px;
left:220px
}

div.su
{
width:0;
height:150px;
border-style: ridge;
border-left:50px;
border-color:black;
position: absolute;
top:40px;
left:620px
}

</style>


<div class="su"></div>

{% if form and form.errors %}
{% for key, error in form.errors.items() %}
<div>{{ error }}</div>
{% endfor %}
{% endif %}

{% set messages = get_flashed_messages()[0] %}
{{ messages }}

<div class="pos_left">
</br>
<b>输入要删除的用户相关落地页信息</b>
</br></br>
<form action="{{ url_for(‘Check‘) }}" method="post">
<input style="width:100%;height:35;" id="user_id" name="user_id"
type="text"
placeholder="输入要删除的 user_id">
</br>
<input style="margin-top:15px; cursor:hand" id="btn-submit" type="submit"
value="执 行 操 作">
</br>
</form>

</div>
<div style="position:absolute; top:40px;left:670px">
<p>只有测试用户数据才可操作,添加测试用户请找管理员</p>
<p>目前测试用户user_id如下:</p>
<p>"22343" , "332"</p>
</div>

左边导航 右边分屏 框架实现

标签:删除   method   mes   span   add   play   相关   ash   messages   

原文地址:https://www.cnblogs.com/kaibindirver/p/12956885.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!