Tab页的两种写法 - jeesite记录

方法一：

每个页面独立显示，通过 class=“active” 选择当前teb页。

		<div class="box-header">
			<ul class="box-tools nav nav-tabs">
				<li class="active"><a href="${ctx}/business/ruleInfo/list/1">${text('规则1')}</a></li>
				<li class=""><a href="${ctx}/business/ruleInfo/list/2">${text('规则2')}</a></li>
				<li class=""><a href="${ctx}/business/ruleInfo/list/3">${text('规则3')}</a></li>
				<div class="pull-right">
					<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
					<% if(hasPermi('business:ruleInfo:edit')){ %>
					<a href="${ctx}/business/ruleInfo/form?type=1" class="btn btn-default btnTool" data-layer="true" title="${text('新增规则')}"><i class="fa fa-plus"></i> ${text('新增')}</a>
					<% } %>
				</div>
			</ul>
		</div>

方法二

在一个页面中，嵌套多个tab子页；
// 激活第一个页签
$(‘#tabpanel1 .tabpanel_mover li:first’).click();

<style type="text/css">
.tabpanel_mover li.active{
	background-color:#3aa0ff;
}
.tabpanel_mover li{
	padding:1px 16px 2px 3px;
	margin:6px 0 6px 6px;
	border:1px solid #e4e4e4;
	border-radius:3px;
	background:#fff;
	box-shadow:0 0 5px #e6e6e6;
	line-height:30px;
	width: 140px;
}
.tabpanel_mover li .title{
	font-size:14px;
}
.tabpanel_mover li.active div{
	color:#fff;
}
.tabpanel_tab_content{
	line-height: 47px;
}
</style>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header with-border">
			<div class="box-title">
				<i class="fa icon-notebook"></i> 会员规则管理
			</div>
		</div>
		<div class="box-body pt0 scroll-x">
			<div class="row">
				<div class="col-sm-12 pr0">
					<div id="tabpanel1"></div>
				</div>
				
			</div>
		</div>
	</div>
</div>
<% } %>

<style>
	.tabpanel_tab_content .tabpanel_move_content {background: #fff;}
</style>

<script>
	// 一个页面一个 tab 控件
	js.initTabPage('tabpanel1', {
		height: function () {
			var windowHeight = $(window).height(),
				headerHeight = $('.box-header').outerHeight(),
				footerHeight = $('.box-footer').outerHeight(),
				height = windowHeight - headerHeight - footerHeight - 3;
			return height < 300 ? 300 : height;
		}
	});
	// 打开示例页面（不可关闭）
	js.addTabPage(null, "规则1", "${ctx}/rule/ruleInfo/规则1List", false);
	js.addTabPage(null, "规则2", "${ctx}/rule/ruleInfo/规则2List", false);
	js.addTabPage(null, "规则3", "${ctx}/rule/ruleInfo/规则3List", false);
	js.addTabPage(null, "规则4", "${ctx}/rule/ruleInfo/规则4List", false);
	if("1" == "${ruleInfo.haveTimeTypeAutoPay}"){
		js.addTabPage(null, "规则5", "${ctx}/rule/ruleInfo/规则5List", false);
	}
	// 用于机构保存后的刷新列表页面（示例）
	window.win = $('#tabpanel1 iframe:first')[0].contentWindow;
	// 激活第一个页签
	$('#tabpanel1 .tabpanel_mover li:first').click();
	
	// 指定内页调用的 tab 对象
	window.tabPage = top.tabPage;
</script>