JS实现品字布局

在网页后台中常用的布局是头部+侧边栏的形式

为了省去多于代码和重复修改多个页面

头部和侧边栏都是共用的,一直不改变的,所以写死在页面中。

中间的内容根据点击而发生改变,所以用iframe包起来

JS实现品字布局

如何实现呢

侧边栏的链接示例

<a class="J_menuItem" href="form_basic.html">基本表单</a>

用于包裹中间内容的iframe

<iframe id="J_iframe" width="100%" height="100%" src="form_basic.html" frameborder="0" data-id="index_v1.html" seamless=""></iframe>

当点击侧边栏的时候,我们不让链接跳转,而用JS改变frame的src就能实现了

$(function(){
//菜单点击
$(".J_menuItem").on('click',function(){
var url = $(this).attr('href');
$("#J_iframe").attr('src',url);
return false;
});
});
上一篇:Cocos2d-X 2.2嵌入MFC的子窗口


下一篇:程序员50题(JS版本)(二)