html框架折叠的javascript实现

最新推荐文章于 2021-06-08 14:25:58 发布
最新推荐文章于 2021-06-08 14:25:58 发布
阅读量961 收藏
点赞数
文章标签： javascript html 框架 border function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faithsmile/article/details/1835607
版权

我有两个htm文件,下面是Main.htm的源码:

<html>
  <head>
    <title>主框架</title>
    <meta http-equiv=content-type content="text/html;charset=gb2312">   
  </head>
  <frameset border="0" framespacing="0" rows="51,*,0,0" frameBorder="0">
    <frame id="daoHangTiao" name="daoHangTiao" src="daoHangTiao.htm" frameBorder="0" noResize scrolling="no">
    <frameset border="0" name="main" frameSpacing="1" frameBorder="0" cols="503,*" scrolling="auto">
      <frame id="leftFrame" border="0" name="leftFrame" marginWidth="0" frameSpacing="0" marginHeight="0" src="leftFrame.htm" frameBorder="0" scrolling="no">
      <frame id="right" border="0" name="right" frameSpacing="0" src="rightIndex.htm" frameBorder="0">
    </frameset>
    <frame border="0" name="online" frameSpacing="0" src="online.htm" frameBorder="0" noResize scrolling="no">
    <frame border="0" name="function" frameSpacing="0" src="function.htm" frameBorder="0" noResize scrolling="no">
  </frameset>
</html>

以下是 leftFrame.htm 的源码:

<html>
  <head>
    <title>leftFrame</title>
    <script language=javascript>
      function changeWin(){
        if(parent.main.cols!='0,*' && parent.main.cols!='5,*'){
          parent.main.cols='5,*';
          ImgArrow.src="bl_1.gif";
        }else{
          parent.main.cols='503,*';
          ImgArrow.src="al_1.gif";
        }
      }
    </script>
    <meta http-equiv=content-type content="text/html;charset=gb2312">
  </head>

  <body bgColor="#8d989a" leftMargin="0" topMargin="0">
    <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
      <tbody>
      <tr>
        <td width="100%">
          <iframe id="leftiframe" style="VISIBILITY:inherit;WIDTH:100%;HEIGHT:100%" name="leftiframe" src="leftMain.htm" frameBorder="0">
          </iframe>
        </td>
        <td bgColor="#d0d0c8">
          <table id="td1" height="100%" cellSpacing="0" cellPadding="0" width="100%" bgColor="#d7d8da border="0">
            <tbody>
              <tr>
                <td title="拖动以调整宽度" height="50%">
                </td>
              </tr>
              <tr>
                <td height="96">
                  <img id=ImgArrow οnclick=changeWin() alt="展开/关闭帖子列表" src="al_1.gif" width="5" border="0" name="ImgArrow" style="currsor:hand">
                </td>
              </tr>
              <tr>
                <td title="拖动以调整宽度" height="50%">
                </td>
              </tr>
             </tbody>
           </table>
         </td>
      </tr>
      </tbody>
    </table>
  </body>
</html>

另外,我还有两个gif图片(就是一个向右的三角箭头与向左的三角箭头,也可以自己PS两个),下载地址如下:

http://txt.mop.com/dzh/centerframe/al_1.gif

http://txt.mop.com/dzh/centerframe/bl_1.gif

将上面四个文件放在同一目录下,即可正常运行Main.htm查看出框架折叠的效果!

faithsmile
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 折叠框架 iframe
11-23
HTML 折叠框架 iframe 点击可收缩
html折叠标签框架,html的基本框架和常用标签
weixin_34636056的博客
05-31 300
jb2312 //防止乱码的格式 //空格table,tr,th,td{border:1px solid;}　　　　　　　　　　　　　　　　　　　　　　 //表格tdcolspan　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //合并(行)strong b　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //粗体i,em...
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
10-23
主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
文字折叠html代码,【MarkDown】使用Html样式和折叠语法
weixin_29118723的博客
06-08 1353
MarkDown很方便，但基本语法有些不足：比如无法使用折叠语法，无法让文字有不同的颜色。这些功能可以实现，不过需要使用Html语法进行扩展。这篇文章主要是整理一下这些技巧，方便更好的使用。一、折叠语法：标签1.1、代码：点击时的区域标题：点击查看详细内容 - 测试 测试测试 title，value，callBack可以缺省 summary：折叠语法展示的摘要details：折叠语法标签p...
HTML简单的折叠菜单实现
aixuan5685的专栏
10-28 767
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>div{font-size:12px;color:red; background-color: #E...
龙博AJAX框架 4.0.zip
05-27
龙博AJAX框架是跨浏览器的JavaScript开放源代码框架集，是构建富web应用的利器. 龙博AJAX框架 4.0 主要更新如下： 主要更改是Ajax，相应的后台和DataBinder，可以直接绑定JSON/XML/SOAP远程服务，由于与以前不...
vscode-lit-html:在JavaScript和TypeScript标记的模板字符串中为html添加语法突出显示
05-02
在JavaScript和TypeScript标记的模板字符串（例如在和其他框架中使用）中添加了对html的语法突出显示和语言支持。特征内联html块的语法高亮显示。 html标记和属性的IntelliSense。 标签上的快速信息悬停。 格式支持...
PhotoSphere:使用ThreeJS框架HTML5 Photo Sphere
05-14
PhotoSphere 使用ThreeJS框架HTML5 Photo Sphere
JavaScript基础教程第8版
06-12
书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie，并在上一版的基础上新增了两章，讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法，也深入探讨...
appdietetica-firefoxOS:这个项目打算用 JavaScript 和 HTML 创建一个新陈代谢计算器
06-22
正在使用 jQuery Mobile 框架。 它是一个开源项目，即任何人都可以自由获取源代码，对其进行修改和重新分发。您可以实施的未来想法（欢迎提出任何建议） 计算通过体育活动的总代谢，例如在 Y 篮球强度下 X 分钟是 Z...
HTML5折叠卡片式下拉菜单代码
10-25
HTML5折叠卡片式下拉菜单代码
网页左侧栏JS折叠菜单.rar
07-10
网页左侧栏JS折叠菜单，可伸缩展开菜单项目，Windows XP menus，菜单前带图标，国外菜单设计作品，带动态渐变效果，示例效果截图如上图所示，兼容火狐/IE8 /Chrome等浏览器。
html右边折叠面板,jquery实现的Accordion折叠面板效果代码
weixin_28756347的博客
05-30 576
本文实例讲述了jquery实现的Accordion折叠面板效果代码。分享给大家供大家参考。具体如下：这是一款Accordion折叠面板，折叠菜单代码，简单Accordion效果，采用CSS与jQuery实现，鼠标点击后展开，再次点击后折叠起来。是网上很常用的手风琴效果。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/x...
Html/JS实现页面的折叠
一只涉IT未深的Student的博客
05-09 2240
Js页面折叠                         var show = false;                         function ShowQueryOption()                          {                             var divQueryOptionUserControl = docum
html easyui怎么实现折叠面板,jQuery EasyUI 布局 – 创建折叠面板
weixin_42361112的博客
05-31 103
jQuery EasyUI 布局 - 创建折叠面板本节中，你将了解在jQueryEasyUI布局中如何创建折叠面板(Accordion)。折叠面板(Accordion)包含一系列的面板(panel)。 所有面板的头部(header)都是可见的，但是一次仅仅显示一个面板的body内容。 当用户点击面板的头部时，该面板的body内容将可见，同时其他面板的body内容将隐藏不可见。 我们将创建三个面板...
html panel折叠,支付宝小程序实现折叠面板（panel）
weixin_42502382的博客
05-31 192
须要实现的功能效果以下javascript axml文件代码html{{item.helpTitle}}{{item.helpContent}}js文件内容javaPage({data: {helpList:[{helpTitle:"item-title1",helpContent:"item-content1"},{helpTitle:"item-title2",helpContent:"ite...
html右边折叠面板,2017IFE-使用CSS实现折叠面板
weixin_42441929的博客
05-30 277
前言2017-百度前端技术学院编码任务：使用CSS实现折叠面板任务目的深入理解html中radio的特性深入理解CSS选择器以及伪元素的使用任务描述使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例)，要求样式一致。实现思路就是利用input[type=radio]所具有的单选特性,然后利用伪类或者伪元素来显示或者隐藏。html中radio的特性...
html easyui怎么实现折叠面板,jQuery EasyUI 布局 – 创建折叠面板 | 菜鸟教程
weixin_35705011的博客
05-31 132
jQuery EasyUI 布局 - 创建折叠面板在本教程中，您将会学习到关于 easyui 折叠面板(Accordion)的知识。折叠面板(Accordion)包含一系列的面板(panel)。所有面板(panel)的头部(header)都是可见的，但是一次仅仅显示一个面板(panel)的 body 内容。当用户点击面板(panel)的头部(header)时，该面板(panel)的 body 内容...
在框架中，可以实现折叠框架效果代码
兴百放的博客
02-04 2361
Main.htmTop.aspx为顶部页left.aspx为左边菜单页spliter.aspx为控制页（控制left.aspx）Main.aspx为默认内容页spliter.aspx       Spliter    a { color: ; text-decoration: none}a:hover { color:red;text-decoration: none}-->     
SSM框架实现评论区折叠问题，jsp代码实现
最新发布
04-01
以下是一个简单的实现评论区折叠功能的 JSP 代码示例： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> 评论区 .comment { border:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值