基于Bootstrap+Nodejs的Web应用（二）_主页面布局

最新推荐文章于 2024-07-05 15:40:53 发布

英雄史诗

最新推荐文章于 2024-07-05 15:40:53 发布

阅读量718

点赞数

分类专栏： web 文章标签： bootstrap 左侧菜单栏 iframe

本文链接：https://blog.csdn.net/heroicpoem/article/details/86759114

版权

web 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1.整体说明

主界面布局使用常规方式:

左侧是菜单栏，包含一、二级菜单，可隐藏、恢复；
右侧是功能区，点击菜单对应切换页面。
切换使用ifram标签加载对应页面。

2.布局

用boostrap方式，整个屏幕划分成2列，
第一列宽1/6(col-md-2)，放菜单；
第二列宽5/6(col-md-10) ，放内容。
bootstrap布局一般格式：
容器container–行row–列col

3.菜单

参考网上的样式。见link
实质还是ul、li标签，更美观。
在li里添加了链接a标签，点击触发iframe加载。

<!--左侧菜单，部分代码-->
 <li>
                        <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                            <i class="glyphicon glyphicon-cog"></i>
                            系统管理
                            
                            <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
                        </a>
                        <ul id="systemSetting" class="nav nav-list secondmenu collapse" style="height: 0px;">
                            <li><a href="#" onclick="menuClick('/users')"><i class="glyphicon glyphicon-user"></i>&nbsp;用户管理</a></li>
                            <li><a href="#" onclick="menuClick('/logout')"><i class="glyphicon glyphicon-th-list"></i>&nbsp;菜单管理</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>&nbsp;角色管理</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-edit"></i>&nbsp;修改密码</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>&nbsp;日志查看</a></li>
                        </ul>
                    </li>

3.切换

iframe标签

iframe标签是浏览器中的浏览器，相当于“画中画”。在整个窗口不变的情况下，加载指定的url。
iframe常用属性

属性名	取值	备注
src	url
width	pixels
height	pixels
frameborder	0,1	注意不是yes，no
onload	事件：加载结束后触发	可以设定iframe大小

<!--右侧内容-->
<div class="col-md-10">
    <div>
        <iframe id="iframe-page-content" src="/home" width="100%"  frameborder="0" border="0" marginwidth="0"

                    marginheight=" 0" scrolling="no" allowtransparency="yes" onload="reinitIframe()"></iframe>
    </div>
</div> <!--右侧内容-->

高度自适应

需要根据加载目标文档的高度，重新设定iframe高度；否则iframe固定大小，可能显示不全。
在iframe事件onload()中调用。

function reinitIframe() { 
            var iframe = document.getElementById("iframe-page-content");
            var bHeight = iframe.contentWindow.document.body.scrollHeight; 
            iframe.setAttribute('frameborder', '0');
            iframe.style.height=bHeight+'px';
        };

无边框

正常情况下，通过属性frameborder=0就可以，但我却消不掉。只好再重设大小时，再次设置就可以了。不清楚根本原因。

4.遗留的问题：

菜单根据权限控制
打开的不同页面应以页签形式保留
&：用户使用中，可能会打开多个页面对比数据，因此需要保留已经打开的。现在是直接重新加载了，会有使用不便。
解决思路是：
1.增加nav对象，保存iframe对应的标签；
2.点击菜单，新生成一个iframe对象，并生成一个标签
3.原来已经打开的iframe隐藏
4.通过点击标签，控制iframe的显示或隐藏。