`

js控制框架页显示[转]

JavaScript 
阅读更多

js控制框架页显示


经常看到别人做的框架页可以收缩，自己也想做一个。偷偷研究了一下，发现并不神秘。嘿嘿。不敢独享跟我一样的菜鸟可以偷学两招。嘿嘿。基本的效果可以看下图：



仔细观察下面的页面，大多数人会回答是一个左右分的框架。呵呵。不然，其实他是左中右三分的框架页。只不过中间的框架页宽度非常之小而已。 查看源码可以知道主框架源码如下：

<frameset rows="*" cols="156,8,*" frameborder="0" border="0" id="frame" >
  <frame src="menu.html" name="leftFrame" scrolling="auto" frameborder="0" />
  <frame src="center.html" name="centerFrame" scrolling="auto" id="leftFrame" frameborder="0" />
  <frameset rows="80,*" frameborder="no" border="0" >
    <frame src="top.html" name="topFrame" scrolling="no" frameborder="0" id="topFrame" />
    <frame src="login.html" name="mainFrame" frameborder="0" />
  </frameset>
</frameset>
<noframes><body>对不起,您的浏览器版本不支持框架技术.</body></noframes>


它将框架分为左中右三分的。中间的框架页宽度只有8.左边设置了156。右边为剩余大小。关键的部分还是在中间的页面。注意frameset的id叫frame.下面会用到。所有的动态改变框架的代码全部隐藏在中间的页面中。代码如下：

<script>
 var displayBar=true;
 function switchBar(obj) {
  if (displayBar){
   parent.frame.cols="0,8,*";
   displayBar=false;
   obj.src="image/center_open.gif";
   obj.title="打开左边管理菜单";
  }else{
   parent.frame.cols="156,8,*";
   displayBar=true;
   obj.src="image/center_close.gif";
   obj.title="关闭左边管理菜单";
  }
 }
 </script>

 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="image/center_bg.gif">
  <tr>
   <td valign="center"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
   <img src="image/center_close.gif" style="cursor:hand" title="关闭左边管理菜单" onClick="switchBar(this)"></td>
  </tr>
 </table>

关键的代码已经看到了吧。关键的代码只有一句。就是在图片按钮的onclick事件中改变父窗体中元素frame的cols的值，其实也就是改变了左中右框架的宽度。打开时左边的宽度为156，中间为8，右边为*，关闭时左边为0,中间为8，右边还为*，这是左边框架就跟消失了一样。呵呵。不错吧。  
好了，好的东西要大家一起分享。

分享到：
| 操纵JsonObject的方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    asp.net客户端控制框架的显示或隐藏

    在asp.net中用javascript控制框架页的显示或隐藏，适合初学者

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    js 操作 frameset frame iframe对象

    * 控制框架中的表单行为：可以使用 `window.frames["frameName"].form` 来控制框架中的表单行为。 JS 操作 Frameset、Frame、Iframe 对象可以实现框架之间的互相访问和控制，提高了 Web 应用程序的灵活性和功能性。

    AdminLTE框架代码实现折叠左侧边栏

    AdminLTE框架应用比较普遍，本文通过js代码实现控制左边框的显示与隐藏。

    js获取页面控件坐标.pdf

    在实际开发中，我们可能需要使用 JavaScript 库或框架来简化获取元素坐标的过程，例如 jQuery 库提供了一个 offset() 方法，可以直接获取元素相对于文档的坐标。 获取页面控件坐标是 JavaScript 编程中非常重要的一...

    NET通用权限管理框架_ui_database

    js框架:jquery 系统大部分使用AJAX操作。大大提高了用户体验 功能描述： 1.支持N级菜单导航，菜单显示方式支持目前支持2种模式分别： 菜单（无限级），横向（2级） 2.表单验证，文本框高亮起来 3.可以动态分配...

    web前端主流框架分析与对比.pdf

    Angular.js 和 Vue.js 是 JavaScript 框架，都是当前 Web 前端开发中最流行的解决方案。Angular.js 是一个完整的解决方案，包括模板语言、依赖注入、 ROUTE 等功能。Vue.js 是一个渐进式框架，可以根据需要选择使用...

    javascript网页特效实例大全

    3.10 显示当前页的所有链接 45 3.11 查看网址源代码 46 3.12 将站点加入收藏夹 47 3.13 单击按钮返回默认主页 47 3.14 给指定的人员发信 48 3.15 弹出菜单式链接 49 3.16 图片选择器 50 3.17 链接导航框 51 ...

    多语言Web网站的框架设计与实现.pdf

    本文将讨论多语言Web网站的框架设计与实现，通过选择动态部分复制框架，修改HTML和JavaScript文件中的语言相关内容，并利用Cookie实现语言协商机制，添加过滤函数以控制页面加载，最后实现按指定语言显示页面。...

    精通JS脚本之ExtJS框架.part1.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    JavaScript网页特效范例宝典源码

    实例078 通过JavaScript控制表单的提交与重置 122 实例079 带记忆功能的表单 123 实例080 防止表单重复提交 124 实例081 自动提交表单 125 实例082 通过for循环获取表单元素的中文名称 126 实例083 可以提交到不同...

    JavaScript完全自学宝典 源代码

    6.13.html 使用JavaScript控制按钮是否可用。 6.14.html 重置按钮的效果。 6.15.html 提交按钮的效果。 第7章（\c07） 示例描述：学习JavaScript的事件处理。 7.1.html 双击某行变换背景色。 7.2....

    JavaScript框架(iframe)操作总结

    这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。 框架间的互相引用 一个页面中的所有框架...

    js-event:强大的js事件框架

    js-event-more是一个js事件库，类似于曾经著名的YUI3事件框架，它被编写为满足事件pub-sub要求，并具有以下独有功能： 像dom事件一样，具有默认事件处理程序和事件冒泡 带有before ， on ， after阶段的事件触发...

    网站后台管理系统框架（精美实用）.rar

    可以实现菜单的多级控制并结合js进行动态显示 后台地址：manage/default.aspx，前台没有其他内容 manage/DB_CNZZ/freasy.mdb为Access数据库文件 非常精美实用的后台菜单 调测提示：此程序需要.net3.5...

    程序天下:JavaScript实例自学手册

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    【Egret Engine v5.4.0】HTML5开源免费游戏框架+极强的跨平台运行能力

    Egret框架内的JavaScript类库，具备卓越的游戏渲染性能，相对于其他HTML5游戏框架，Egret深度优化了显示对象列表处理机制，提供 了强大的位图CacheBuffer处理功能。在未来的正式版本中，Egret还将加入所有的渲染内容...

    javaScript实例自学手册486例,附带目录可方便搜索

    javaScript实例自学手册代码,加了个index.html方便搜索 内容如下面的。 1.1 HTML页面反向显示.htm 1.10 定义网页的关键字.htm 1.11 进入页面同时弹出欢迎对话框.htm 1.12 禁止网页另存.htm 1.13 禁止页面加入...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    iframe实现左侧菜单右侧页面简单示例

    iframe实现左侧菜单右侧页面简单示例。点击左侧菜单，右侧显示不同html内容，并加有css样式，美观实用。很简单的界面，没有多余功能。

Magicbox
Global site tag (gtag.js) - Google Analytics