毕设IDEA2019之结合bootstrap3框架iframe标签模态框实现系统嵌套布局

当前大部分的管理后台都是左侧菜单栏右侧显示相应的不同页面内容的嵌套布局，好处就是逻辑清晰、界面简洁、易于管理，还有类似于之前清明的时候网页全局变成哀悼灰，采用嵌套布局的话只需要改主界面的css样式就行了。没什么好说的，直接进入正文。
前置条件：耐性100%；IDEA2019；bootstrap3框架

简单的效果图

界面比较简单，先上图

引用boostrap3框架

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

顶部导航栏+模态框

顶部导航栏用于显示系统名称，在线人数，用户名，退出按钮等元素。同时点击系统名称弹出模态框显示员工联系方式，实际使用中方便用户联系其他同事。（纯粹是想玩一下模态框）

<%--顶部导航栏--%>
<nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a id="tittle" class="navbar-brand" href="#" data-toggle="modal" data-target="#myModal">饭店点菜系统管理后台</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <c:forEach items="${userrolelist}" var="ur"><a class="name">您好：${ur.username}${ur.roles[0].rolename}</a></c:forEach>
            <%--在线人数需要ajax局部刷新--%>
            <a id="countnum">在线人数：${Count.size()}</a>
            <ul class="nav navbar-nav navbar-right">
                <li><img src="../images/switch.png"  id="exitlink"  style="margin-top:10px;margin-right:20px;width: 30px;height: 30px"/></li>
            </ul>
        </div>
    </div>
</nav>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">联系方式</h4>
            </div>
            <div class="modal-body outer-container">
                <iframe src="..." ></iframe>
            </div>
        </div>
    </div>
</div>

<script>
$(function(){
    $("#tittle").popover();
    $('#myModal').on('shown.bs.modal', function () {
         $('#myInput').focus()
     });
}
</ccript>

菜单栏和内容页面布局

• 这里我们用bootstrap框架的栅格系统实现;
• 屏幕分辨率可能会对布局位置有点影响，自己微调一下；
• 通过.outer-container {position: relative;overflow: hidden;}隐藏ifame标签的滑动条
• 点击
• 标签时将data-src的值赋予ifame标签的src属性，实现动态显示不同页面内容

<div class="container-fluid margintop" >
    <div class="row">
        <!-- 左侧导航 -->
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar left">
               <li data-src="..." ><a href="#">订单列表</a></li>
               <li data-src="..." ><a href="#">预约列表</a></li>
               <li data-src="..."><a href="#">上菜列表</a></li>
               <li data-src="..."><a href="#">餐桌列表</a></li>
               <li data-src="..."><a href="#">菜单列表</a></li>
               <li data-src="..."><a href="#">优惠券列表</a></li>
               <li data-src="..."><a href="#">用户列表</a></li>
               <li data-src="..."><a href="#">轮播图列表</a></li>
               <li data-src="..."><a href="#">图表列表</a></li>
            </ul>
        </div>
		<%--右侧内容--%>
        <div class="col-sm-9 col-md-10 outer-container right">
        	<iframe class="leftmore" id="iframecontext" marginWidth=0 marginHeight=0 src=""  scrolling="auto" frameBorder=0 width="100%" height="100%"></iframe>
        </div>
    </div>
</div>

javascript

<script>
$(function(){
  $(".sidebar li").on("click",function(){
       var address =$(this).attr("data-src");
       $("#iframecontext").attr("src",address);
      });
}
</script>

结尾

系统的表格只是用了bootstrap的原生表格设计，之前介绍bootstrap的时候也写到了，这里就不重复了，主要是记录一下如何使用ifame标签实现左边菜单栏右边动态显示不同页面内容。因为不打算从事前端，所有对前端没太深入了解，写得会比较简陋，见谅哈。

感觉有用就点个赞呗~

可能会有盆友留意到了那不起眼的分页条，下一篇就写一下怎么分页