全屏页面（分左右页面的）

最新推荐文章于 2022-05-07 11:13:58 发布

宸路

最新推荐文章于 2022-05-07 11:13:58 发布

阅读量1k

点赞数

分类专栏： JQuery学习 ASP.NET 文章标签： javascript iframe div html border function

本文链接：https://blog.csdn.net/gaofang2009/article/details/5842852

版权

ASP.NET 同时被 2 个专栏收录

96 篇文章 0 订阅

订阅专栏

JQuery学习

43 篇文章 0 订阅

订阅专栏

1、全屏页面显示

2、左右页面是通过 iframe来连接的。

3、点击菜单时，可以左右显示两个页面

4、点击菜单时，可以在中间显示一个页面

5、通过 leftpage,rightpage来找到左页面、右页面，并更改iframe的src

6、在页面的边缘位置有一个浮动的层

js是用jquery书写

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="全屏页面.aspx.cs" Inherits="全屏页面" %> <!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 runat="server"> <title></title> <mce:script type="text/javascript" src="Scripts/jquery-1.4.2.min.js" mce_src="Scripts/jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> html { overflow: hidden; } </style> </head> <body οnlοad=' $("#ShowMainPage").click();'> <form id="form1" runat="server"> <div style="height:40px;"> 菜单当前页面<span id="PageName" style="background-color: Blue;" mce_style="background-color: Blue;"></span><br /> <a title="有左右两个页面的" class="ShowPage" href="javascript:" mce_href="javascript:" leftpage="http://www.baidu.com" rightpage="http://blog.csdn.net/gaofang2009">有左右两个页面的</a> <a class="ShowPage" title="只有一个页面的" id="ShowMainPage" href="javascript:" mce_href="javascript:" leftpage="" rightpage="http://blog.csdn.net/gaofang2009"> 只有一个页面的</a></div> <div style="width: 100%; height: 100%; height: 10px; margin-top: 1px; border-bottom-style: none; background-color: Red;"> </div> <div style="width: 5px; height: 100%; left: 0px; float: left; position: absolute; background-color: Red;"> </div> <div style="width: 5px; height: 100%; max-height: 100%; right: 0px; float: right; position: absolute; background-color: Red;"> </div> <div style="left: 8px; right: 8px; bottom: 0px; border-style: none; position: absolute; top: 64px; height: 100%;"> <table cellpadding="0" cellspacing="0" border="0" id="ShowLeft_Right" style="width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: none; vertical-align: top;"> <tr> <td id="td_SidebarFrame" style="width: 200px; height: 100%; vertical-align: top;"> <iframe id="SidebarFrame" width="200px" height="100%" frameborder="0" scrolling="no"> </iframe> </td> <td id="td_ContentFrame" style="text-align: left; height: 100%; padding-left: 1px; vertical-align: top; overflow: hidden;"> <iframe id="ContentFrame" width="100%" height="100%" frameborder="0" scrolling="no"> </iframe> </td> </tr> </table> <table id="ShowCenter" cellpadding="0" cellspacing="0" border="0" style="width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; height: 100%; overflow: hidden; display: none; vertical-align: top;"> <tr> <td style="height: 100%; padding-left: 1px; vertical-align: top; overflow: hidden;"> <iframe id="CenterFrame" width="100%" height="100%" frameborder="0" scrolling="no"> </iframe> </td> </tr> </table> </div> <div style="height: 8px; position: absolute; bottom: 0px; width: 100%; background-color: Red;"> </div> </form> </body> </html>

效果图：