`

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的方法
评论
发表评论

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

相关推荐

    通过按钮控制框架的显示与隐藏

    而 `main.html` 包含用于控制框架显示与隐藏的JavaScript函数。 #### HTML文件详解 1. **`index.html`**： - **Meta信息**：该文件定义了文档的字符编码为GB2312，并指定了页面是使用Microsoft FrontPage 4.0创建...

    js实现从框架页跳出

    ### js实现从框架页跳出 在网页开发过程中，有时候我们需要从一个嵌套在框架内的页面跳转到非框架页面，这种需求在很多场景下都非常常见。例如，用户可能需要从登录页面进入主应用界面，而这个过程往往伴随着从一个...

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

    总结起来，通过JavaScript，我们可以轻松地在ASP.NET应用中控制框架的显示和隐藏，提升用户体验。了解DOM操作和JavaScript事件处理是掌握这项技能的关键。对于初学者，可以从简单的实例开始实践，逐步熟悉这些概念和...

    js控制框架(不完整)

    在JavaScript（JS）编程中，控制框架的收缩是一种常见的需求，尤其在构建动态网页和单页应用程序（SPA）时。框架通常指的是页面布局中的部分，如侧边栏、顶部导航、底部栏等，它们可以被折叠或展开以优化用户体验。...

    漂亮实用的JS页面框架

    通过JavaScript事件监听和DOM操作，框架实现了元素的拖放功能，使用户可以直观地改变界面布局，适应不同的显示需求。 2. **仿QQ上下滑动菜单**：借鉴了QQ应用的滑动菜单设计，使得左侧菜单在保持简洁的同时，提供了...

    自制纯js分页框架

    开发者需要了解如何根据数据量和每页显示的数量来计算总页数，以及如何通过JavaScript控制页面的显示。 5. **事件驱动编程**：框架使用事件驱动编程模式，当用户点击分页按钮时，会触发相应的事件处理函数，更新...

    关于iframe页面报错如何跳到框架显示

    ### 关于iframe页面报错如何跳到框架显示 在网页开发过程中，经常遇到的一个问题是当嵌入在`iframe`中的内容出现错误时，如何让用户直接看到这个错误所在的框架或者跳转到一个特定的页面。这个问题涉及到前端...

    js左侧框架页可以点击收缩Demo

    在"js左侧框架页"的场景中，JavaScript负责监听用户的点击事件，根据用户的行为来改变框架页的状态，如展开或收起菜单。 ECMAScript（简称ES）是JavaScript的基础，是欧洲计算机协会制定的一套标准。随着版本的更新...

    CSS框架与JS框架结合

    将CSS框架与JS框架结合使用是现代Web开发中常见的实践，旨在利用这些框架提供的预置样式和功能组件，快速高效地构建现代网页应用。 标题“CSS框架与JS框架结合”提到了AngularJS和Bootstrap，这两个框架在Web开发中...

    图片展示js框架

    通过JS框架，开发者可以轻松实现动态的图片操作，比如手势控制、平滑缩放、360度旋转等，使图片浏览更具互动性。 **二、JS框架的选择** "图片展示js框架"是指使用JavaScript编写的用于处理图片展示的库，它提供了...

    Javascript，Html，Css，Frame框架整合的菜单样式

    通过JavaScript来控制CSS类的切换，实现菜单的展开和收起效果。 例如： ```css .left-menu { display: none; } .menu-expanded .left-menu { display: block; } ``` ```javascript document.getElementById('...

    JS(JQUERY)操作框架页面

    - **scrolling**: 控制框架内页面是否显示滚动条。 - **src**: 指定要加载的页面URL。 示例代码中展示了两个 `&lt;iframe&gt;` 元素，分别加载了 `H16-1.htm` 和 `H16-2.htm` 文件。 #### 父页面操作子框架的方法 **...

    JS框架property制作tab页

    在JS框架中，我们可以通过事件监听、DOM操作以及CSS样式控制来实现这一功能。 1. **HTML结构**： 在HTML中，我们需要为每个Tab和内容区域创建相应的标记。例如，可以使用`&lt;ul&gt;`来表示Tab导航，`&lt;li&gt;`作为每个Tab项...

    通过js来控制web页面的一些例子

    此外，JavaScript库和框架如jQuery、React和Vue.js极大地简化了Web开发，提供了更高效的方法来操作DOM、管理组件状态和创建复杂的用户界面。例如，jQuery是一个流行的库，它提供了一套简便的API来处理常见的DOM操作...

    气泡javascript验证框架

    "气泡javascript验证框架"是一个专注于用户体验的验证解决方案，它通过修改`validate.js`库，将原本的验证提示改为了气泡样式，使得用户交互更加直观且友好。 `validate.js`是一个轻量级的JavaScript表单验证框架，...

    JS分页框架

    JavaScript 分页框架是一种用于在网页上展示大量数据时进行数据分块显示的技术，它能够有效提高用户体验，避免一次性加载过多内容导致页面响应速度变慢。在这个项目中，我们使用了AngularJS和Bootstrap这两个流行的...

    unigu左侧导航栏js框架控制菜单可视

    在这个场景中，unigu是一个可能自定义的前端框架，它提供了一种JavaScript方法来控制左侧导航菜单的显示和隐藏，以优化用户体验。 首先，我们需要理解JavaScript（JS）框架在网页开发中的角色。JS是一种强大的...

    js轮播图框架(sugar)

    JavaScript轮播图框架，如“Sugar”，是一种用于创建动态、交互式图像滑动效果的工具。这类框架在网页设计中非常常见，用于展示产品图片、幻灯片或任何需要顺序展示的内容。Sugars的核心特性在于其兼容性，能够适应...

    构建在 BootStrap 4 之上的 HTML 控制面板框架

    Bootstrap是世界上最流行的前端开发框架之一，它提供了一套完整的响应式布局、移动设备优先的Web组件，以及丰富的CSS样式和JavaScript插件，使得开发者能够快速构建美观且功能齐全的网页。 BootStrap 4是该框架的...

    js框架源码

    在JavaScript框架中，Model负责数据的存储和处理，View负责显示数据，而Controller处理用户输入并协调Model和View之间的通信。MVC的引入使代码组织更加有序，便于维护和测试，尤其是对于复杂的应用程序。 在提供的...

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