layui使用经验总结（一）——页面中加入子页面的两种方式_laymodular layui

一、通过iframe在页面中加入子页面

<iframe id="modularpage" name="modularpage" width="100%" height="90%" frameborder="0" scrolling="no" src="${base}/home/menu.html?nodeId=1">
</iframe> 
1
2

点击菜单栏，改变或者再次请求路径

• 1.遍历菜单栏

<div class="layui-tab layui-tab-brief layui-tab-style" lay-filter="tabs">
			<ul class="layui-tab-title f-b-n-b">
			 <c:forEach items="${menuList }" var="menu" varStatus="index">
			
				<li  <c:if test="${index.index == 0 }">class="layui-this"</c:if> >
					<table>
						<tr >
							<td>
								<div class="title">${ menu.typeName }</div>
							</td>
						</tr>
					</table>
				</li>
			</c:forEach>
			</ul>
		</div>
	</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

其中

 <li  <c:if test="${index.index == 0 }">class="layui-this"</c:if> >
1

设置默认选中菜单栏

• 2、JavaScript代码

layui.use(['tabs','form'], function(){
	var $ = layui.$,
	tabs = layui.tabs,
	form = layui.form;
	
	tabs.render({ // 切块导航
		filter:"tabs",
		callback:function(){
			$('#modularpage').attr('src','${base}/home/menu.html');
	});
})
}
1
2
3
4
5
6
7
8
9
10
11
12

二、通过div在页面加入子页面

• 1.遍历菜单栏

<div class="layui-tab layui-tab-brief layui-tab-style" lay-filter="tabs">
			<ul class="layui-tab-title f-b-n-b">
			 <c:forEach items="${menuList }" var="menu" varStatus="index">
			
				<li  <c:if test="${index.index == 0 }">class="layui-this"</c:if> >
					<table>
						<tr >
							<td>
								<div class="title">${ menu.typeName }</div>		
							</td>
						</tr>
					</table>
				</li>
			</c:forEach>
			</ul>
		</div>
	</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

其中

 <li  <c:if test="${index.index == 0 }">class="layui-this"</c:if> >
1

设置默认选中菜单栏

• 2、div标签

<div class="f-r f-bg-white f-p-l f-p-r f-p-t-sm f-p-b-sm f-webkit-box f-m-b" id="modular"></div>
1

• 3、JavaScript代码

  <script>
    $(function() {
    	Utils.fillDiv('modular', '${base}/modular.html');
    });
    layui.use(['tabs','form'], function(){
    	var $ = layui.$,
    	tabs = layui.tabs,
    	form = layui.form;
    	
    	tabs.render({ //
    		filter:"tabs",
    		callback:function(){
    			Utils.fillDiv('modular', '${base}/modular.html');
    		}
    	});
    })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17