在框架集中重叠 Collapse/expand 内容
Overlap Collapse/expand content in frameset
如何重叠框架集中的 collapsed/expanded 内容显示(我不想缩短顶部框架的细节)?我使用一个 3 框架的框架集(顶部框架、左框架和右框架),并且无法使这个东西工作(为重叠顶部框架集中的扩展内容而制作的脚本,类似于 z-index 逻辑)。是否可以进行此更改?请给些建议。谢谢
框架集页面
<html>
<FRAMESET rows="18%,*" frameborder="YES">
<frame src="frame_a.htm">
<FRAMESET cols="15%,*" frameborder="YES" >
<frame src="frame_b.htm">
<frameset rows="*" frameborder="YES" border="1" framespacing="1" cols="*">
<frame src="frame_c.htm">
</frameset>
</html>
构图页面
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
当前系统布局的屏幕截图。
但是当我点击展开 link 时,所有顶部框架的细节都会被缩短。如何使展开的细节布局与顶框重叠?
预期输出:
"please give some advice"
- Stop using frames: they are not supported in HTML5.
- Use tables when you need a table. Do not use tables for layout purposes.
- Always specify a
docytpe
.
- Use lower case for the HTML tags (or upper case if you want, but don't mix them)
- Take this list as a recommendation and not as criticism. I made those mistakes too.
正如您在问题中提到的,这可以通过 z-index
解决。您面临的问题可以通过使两个 table 具有绝对位置(与 top-left 对齐),并给第一个 table 一个比第一个 z-index
更高的 z-index
来解决第二个 table:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
如何重叠框架集中的 collapsed/expanded 内容显示(我不想缩短顶部框架的细节)?我使用一个 3 框架的框架集(顶部框架、左框架和右框架),并且无法使这个东西工作(为重叠顶部框架集中的扩展内容而制作的脚本,类似于 z-index 逻辑)。是否可以进行此更改?请给些建议。谢谢
框架集页面
<html>
<FRAMESET rows="18%,*" frameborder="YES">
<frame src="frame_a.htm">
<FRAMESET cols="15%,*" frameborder="YES" >
<frame src="frame_b.htm">
<frameset rows="*" frameborder="YES" border="1" framespacing="1" cols="*">
<frame src="frame_c.htm">
</frameset>
</html>
构图页面
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
当前系统布局的屏幕截图。
但是当我点击展开 link 时,所有顶部框架的细节都会被缩短。如何使展开的细节布局与顶框重叠?
预期输出:
"please give some advice"
- Stop using frames: they are not supported in HTML5.
- Use tables when you need a table. Do not use tables for layout purposes.
- Always specify a
docytpe
.- Use lower case for the HTML tags (or upper case if you want, but don't mix them)
- Take this list as a recommendation and not as criticism. I made those mistakes too.
正如您在问题中提到的,这可以通过 z-index
解决。您面临的问题可以通过使两个 table 具有绝对位置(与 top-left 对齐),并给第一个 table 一个比第一个 z-index
更高的 z-index
来解决第二个 table:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>