在框架中，可以实现折叠框架效果代码

最新推荐文章于 2021-06-01 00:25:35 发布
原创 最新推荐文章于 2021-06-01 00:25:35 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#框架 #application #session #border #html #javascript

本文详细解析了一个复杂的网页布局结构，包括顶部导航、左侧菜单、分割器及主要内容区域的设计，并介绍了使用C#实现的动态控制左侧菜单宽度的方法。

Main.htm
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
</head>
<frameset rows="102,*" frameborder="NO" border="0" framespacing="0" name="topset">
<frame name="topFrame" scrolling="NO" noresize src="Top.aspx">
<frameset rows="*" cols="204,*" framespacing="0" frameborder="no" border="0" name="middleset">
<frame name="leftFrame" noresize src="left.aspx">
<frameset rows="*" cols="5,*" framespacing="0" frameborder="NO" border="0">
<frame src="spliter.aspx" name="spliterFrame" scrolling="NO" noresize>
<frame name="mainFrame" src="Main.aspx">
</frameset>
</frameset>
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>


Top.aspx为顶部页
left.aspx为左边菜单页
spliter.aspx为控制页（控制left.aspx）
Main.aspx为默认内容页


spliter.aspx
<%@ Page language="c#" Codebehind="Spliter.aspx.cs" AutoEventWireup="false" Inherits="LiTianPing.Web.Spliter" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>
  <head>
    <title>Spliter</title>
    <style type="text/css">
<!--
a { color: <%=Application[Session["Style"].ToString()+"xtree_bgcolor"]%>; text-decoration: none}
a:hover { color:red;text-decoration: none}
-->
</style>
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
  </head>
  <body bgcolor='<%=Application[Session["Style"].ToString()+"xspliter_color"]%>' leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onMouseOver="if(parent.middleset.cols='0,*'){parent.middleset.cols='<%=Application[Session["Style"].ToString()+"xleft_width"]%>,*'}" onClick="if(parent.middleset.cols!='0,*'){parent.middleset.cols='0,*'}else{parent.middleset.cols='<%=Application[Session["Style"].ToString()+"xleft_width"]%>,*'};" style="cursor: hand">

    <form id="Form1" method="post" runat="server">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</p>
<br/>
<table width="5" height="70" border="0" cellpadding="0" cellspacing="0" bgcolor='<%=Application[Session["Style"].ToString()+"xspliter_color"]%>'>
<tr>
<td height="2" bgcolor='<%=Application[Session["Style"].ToString()+"xtree_bgcolor"]%>'></td>
</tr>
<tr>
<td><font color='<%=Application[Session["Style"].ToString()+"xtree_bgcolor"]%>'>]</font></td>
</tr>
<tr>
<td height="2" bgcolor='<%=Application[Session["Style"].ToString()+"xtree_bgcolor"]%>'></td>
</tr>
</table>
     </form>

  </body>
</html>
 

AdminLTE框架代码实现折叠左侧边栏
03-12
AdminLTE框架应用比较普遍，本文通过js代码实现控制左边框的显示与隐藏。
mfc开发的一个折叠框程序，附源码
05-03
一个实用的折叠框例子，使用的是vc6.0编写的mfc，文件下载后，可以直接使用vc6.0打开，附带源代码。希望对初学者有一定帮助
一个带折叠菜单的VB界面框架示例
09-10
一个带折叠菜单的VB界面框架示例
左边框架的折叠显示
andjoy的专栏
06-24 1018
                     marginWidth="0" frameSpacing="2" marginHeight="0" src="left.aspx" frameBorder="0" noResize scrolling="yes">                                                                        
导航控制折叠 frame
yihuei123的专栏
04-18 1349
main.jsp      EAPN                                   bar.jsp     .navPoint { FONT-SIZE: 12px; CURSOR: hand; FONT-FAMILY: "Webdings"}  var hidden="false";function switchSysBarB(
Angular+ionic实现折叠展开效果的示例代码
10-15
在本文中，我们将深入探讨如何使用Angular和Ionic框架来实现折叠/展开的效果，这对于构建动态且交互性强的移动应用至关重要。这种效果通常用于显示和隐藏详细信息，以提高用户体验和界面的整洁性。 首先，我们来看...
Javascript实现代码折叠功能
10-21
JavaScript代码折叠功能是一种提高代码可读性和管理性的实用技术，尤其在处理大量代码时非常有用。在Visual Studio这样的集成开发环境中，...此外，还可以考虑引入CSS来美化折叠效果，或者使用框架如jQuery来简化代码。
vuejs实现折叠面板展开收缩动画效果
10-18
本文介绍了在Vue.js框架下实现折叠面板展开和收缩动画效果的方法，并提供了具体的代码实现。知识点包括Vue.js的使用、CSS3的动画实现以及JavaScript在Vue.js中的应用。 首先，文章强调了Vue.js框架下的组件化编程...
页面折叠效果实现-下载即用.zip
最新发布
01-02
在HTML框架中，我们可以设立一组被包含在`<div>`或`<ul>`标签内的构件，通过赋予特定的class或id来标示需要折叠的元素。 例如，可以利用`<details>`与`<summary>`标签来设计一个可折叠的区域：```...
框架集的折叠
xiao_jun_0820的专栏
06-21 2486
 主框架mainFrame分成三个子框架,分别为leftFrame,rightFrame,topFrame,框架集代码如下:frameset rows="40,*" cols="*" frameborder="no" border="1" framespacing="0">  frame src="top.aspx" name="topFrame" scrolling="No" nores
java折叠树形菜单源码
01-15
用jsp写的折叠菜单，加框架，可以隐藏在左侧
折叠的table行元素bug
12-14
来一个例子:代码很简单,如下: 复制代码代码如下: <table border=”1″> <tr> <td>dd</td> <td>dds</td> </tr> <tr> <td>ss</td> <td>sss</td> </tr> </table> 如此,一个表格,有两行两列,在任何浏览器下都没有任何显示错误.但是如果我加下面这句css,情况就不同了: 复制代码代码如下: <style> tr{position: relative;} </style> 看来是要出问题了,可是别着急,其实这个时候从表面上你看不到任何问题,页面布局绝对不会乱掉, 你看不到任何东西会重叠起来. 我可从来
HTML 折叠框架 iframe
11-23
HTML 折叠框架 iframe 点击可收缩
html框架折叠的javascript实现
faithsmile的专栏
10-21 1028
我有两个htm文件,下面是Main.htm的源码:      主框架                                              以下是 leftFrame.htm 的源码:      leftFrame          function changeWin(){        if(parent.main.cols!=0,* && parent.m
[js]可折叠的框架效果
weixin_34007291的博客
01-11 209
今天学习过程中遇到要实现一个仿QQ下拉菜单的效果,在网上找到一些资料,资料目前以保存在blog文件中,以下是左右伸缩的代码.将以下代码保存为htm或html文件在浏览器里一看便知效果. &lt;SCRIPT language=javascript&gt;function switchbar(){if (switchPoint.innerText==3){switchPoint.innerTex...
frame分割条效果
xiandawang的专栏
06-12 972
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >http://www.chinadci.com" frameborder=1 >http://www.youkuaiyun.com" frameborder=1 >
html中table折叠,HTML_折叠的table行元素bug，来一个例子:代码很简单,如下: - phpStudy...
weixin_29085151的博客
06-01 336
来一个例子:代码很简单,如下:复制代码代码如下:ddddssssss如此,一个表格,有两行两列,在任何浏览器下都没有任何显示错误.但是如果我加下面这句css,情况就不同了:复制代码代码如下:tr{position: relative;}看来是要出问题了,可是别着急,其实这个时候从表面上你看不到任何问题,页面布局绝对不会乱掉,你看不到任何东西会重叠起来.我可从来没有想过要耍大家,虽然表面上看不到问题...
表格折叠的实现
fortunatelx的博客
06-10 557
效果图： function fold(sender){ var dataValue=$(sender).attr("dataValue"); if ($(sender).html() == "+"){ $(sender).html("-"); $("[name="+dataValue+"]").removeClass("fn-hide"); } else { $(sender).html("+"); $("[name.
html折叠表格,CSS 表格
weixin_39673002的博客
05-31 561
HTML表用于在表格中布置表格数据。使用CSS，我们可以通过添加边框，控制表单元格文本对齐，高亮表行等样式HTML表。表格边框我们可以使用border属性为表，表行和表单元格添加边框。table,th,td{border:1pxsolidblack;}html>table,th,td{border:1pxsolidblack;}ValueItemCSSS...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值