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>