LayUI 后台管理模板

页面代码

 <div style="height:60px;position: relative;top: 0;width:100%;z-index: 100;background: #393D49;">  
            <div style="display: inline;font-size: 40px;margin-left:20px;">  
                <a><img src="${pageContext.request.contextPath}/image/title100.png" style="width: 400px;height: 50px;"></a>  
            </div>  
            <ul class="layui-nav" style="border-radius: 0;display: inline;float: right;">  
                <li class="layui-nav-item"> 
                    
                    <a href="${pageContext.request.contextPath}/jsp/info.jsp">
                        <img src="/img/${user.headImg}" class="layui-nav-img"> 
                        ${user.nickname}
                    </a>  
                </li>  
                <li class="layui-nav-item">  
                    <a href="${pageContext.request.contextPath}/jsp/setting.jsp">设置</a>  
                </li>  
                <li class="layui-nav-item">  
                    <a href="${pageContext.request.contextPath}/jsp/login.jsp">退出</a>  
                </li>  
            </ul>  
        </div>  
        <div style="top:60px;position: fixed;overflow-x: hidden;">  
            <ul class="layui-nav layui-nav-tree layui-nav-side" style="margin-top: 60px;border-radius: 0;">  
                <li class="layui-nav-item layui-nav-itemed">  
                    <a>学员管理</a>  
                    <dl class="layui-nav-child">  
                        <dd>  
                            <a name='a' title="${pageContext.request.contextPath}/jsp/Student/list.jsp">在读学员信息管理</a>  
                        </dd>  
                        <dd>  
                            <a name='a' title="${pageContext.request.contextPath}/jsp/Student/graduatelist.jsp">已毕业学员信息管理</a>  
                        </dd>  
                        <dd>  
                            <a name='a' title="../../address.html">休学学员信息管理</a>  
                        </dd>
                        <dd>  
                            <a name='a' title="../../address.html">导入学员信息数据</a>  
                        </dd> 
                        <dd>  
                            <a name='a' title="${pageContext.request.contextPath}/jsp/Student/addStudent.jsp">添加学员信息</a>  
                        </dd>
                         <dd>  
                            <a name='a' title="../../address.html">班级管理</a>  
                        </dd>
                         <dd>  
                            <a name='a' title="../../address.html">贷款缴费明细管理</a>  
                        </dd>   
                    </dl>  
                </li>  
                <li class="layui-nav-item layui-nav-itemed">  
                    <a>请假管理</a>  
                    <dl class="layui-nav-child">  
                        <dd>  
                            <a name='a' >请假申请</a>  
                        </dd>  
                        <dd>  
                            <a name='a' >请假审批</a>  
                        </dd>  
                    </dl>  
                </li>  
                  
                <li class="layui-nav-item layui-nav-itemed">  
                    <a>综合管理</a>  
                    <dl class="layui-nav-child">  
                        <dd>  
                            <a name='a' title="${pageContext.request.contextPath}/jsp/multiple/annouse.jsp">通告管理</a>  
                        </dd>  
                        <dd>  
                            <a name='a' title="../../address.html">待办事项管理</a>  
                        </dd>
                        <dd>  
                            <a name='a' title="../../address.html">员工管理</a>  
                        </dd>   
                    </dl>  
                </li>  
            </ul>  
        </div>  
        <div style="left: 200px;right:0;position: absolute;overflow-y: auto;">  
            <div class="layui-tab" lay-filter="demo">  
                <ul id="tabTitle" class="layui-tab-title">
                    
                </ul>  
                <div id="tabContainers" class="layui-tab-content">
                      <div class="layui-tab-item layui-show">
                        <div class="layui-container">
                          
                </div>
                      </div>
                </div>  
            </div> 
        </div>

js

    <script type="text/javascript">  
            //调整iframe高度  
            function reinitIframe() {  
                var iframes = document.getElementsByName("iframe");  
                try {  
                    for(var i = 0; i < iframes.length; i++)  
                        //iframes[i].height = iframes[i].contentWindow.document.documentElement.scrollHeight;  
                        iframes[i].height = window.screen.height -280;  
                } catch(ex) {}  
            }  
            window.setInterval("reinitIframe()", 200);  
  
            layui.use(['layer', 'laypage', 'element'], function() {  
                var $ = layui.jquery,  
                    element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块  
                //添加点击事件
                var ssm=$("a[name='a']");
                   ssm.on("click", function() {  
                   var title = $(this).text();  
                   var tabs = $(".layui-tab-title").children();  
                   
                   //判断是否已打开，若已打开则直接切换
                   for(var i = 0; i < tabs.length; i++) {  
                       if($(tabs[i]).html().substr(0,$(tabs[i]).html().indexOf("i")-1) == title) {
                        element.tabChange('demo', $(tabs[i]).attr("lay-id"));  
                           return; 
                       }                        
                   }
                   //添加tab 
                   element.tabAdd('demo', {  
                      title: $(this).text() + "<i class='layui-icon layui-unselect layui-tab-close'>ဆ</i>",  
                      content: '<iframe name="iframe" src="' + this.title + '" frameborder="0" style="width: 100%;"></iframe>',
                      id: new Date().getTime()
                   });
                   //添加删除功能
                   var r = $("#tabTitle").find("li");    
                        r.eq(r.length - 1).children("i").on("click", function () {
                        element.tabDelete("demo", $(this).parent("li").attr('lay-id'));
                    }), element.tabChange("demo",$(this).parent("li").attr('lay-id'));
                    element.init();
               });
           });
            
        </script>

转载于:https://www.cnblogs.com/jianglei233/p/7767321.html