页面多页签的实现_html 多层页签-CSDN博客

本文链接：https://blog.csdn.net/fenyu8/article/details/53113082

1.设置视图页面双击打开页面的脚本

2.在ExpenseRequest_List.js实现脚本方法

//列表界面双击打开查看界面
function openInfoWindow(fileId,openType)
{
	if(fileId=="")
	{
		alert("ID不能为空");
	}
	var url = "";
	var height=705;
	var width=1024;
	var iLeft = (window.screen.availWidth-width)/2;
	var iTop = (window.screen.availHeight-height)/2;
	var style = "height="+height+",width="+width+",top="+iTop+",left="+iLeft+",location=no,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,toolbar=no";
	if(openType == "new"){
		
	}else if(openType == "view"){
		url = Systempath + "/scripts/module/expenserequest/ExpenseRequestManage.jsp?FILEID="+fileId;
	}else if(openType == ""){
		
	}
	
	window.open(url,"_blank",style);
}

3.在页面ExpenseRequestManage.jsp实现多页签

<%@page contentType="text/html;charset=UTF-8" %>
<%@page import="java.util.List"%>
<%@page import="com.costech.common.service.ICommonService"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="java.lang.RuntimeException" %>
<%@page import="com.costech.common.helper.ServiceHelper"%>
<%@page import="com.costech.common.util.StringUtility"%>
<%@page import="com.costech.common.bean.SystemPath"%>
<%@page import="com.costech.module.expenserequest.bean.ExpenseRequest"%>
<%@page import="com.costech.module.expenserequest.helper.ExpenseRequestHelper" %>
<%@page import="com.costech.module.expenserequest.service.IExpenseRequestService" %>



<%
	String sVersion = (String) session.getAttribute("sVersion");
	String fileID = StringUtility.toStringValue(request.getParameter("FILEID"), "");
	String isRead = StringUtility.toStringValue(request.getParameter("isRead"), "0");

	IExpenseRequestService iExpenseRequestService = (IExpenseRequestService) ServiceHelper.getService("expenseRequestService");
	ExpenseRequest oFile = iExpenseRequestService.getExpenseRequestByID(fileID);

	String title0 = "费用申请";
	String title1 = "客户设置";
	String title2 = "产品设置";
	String tabUrl0 = SystemPath.SYSTEMPATH + "/scripts/common/file/File_Info_Template.jsp?FormID=2c99861257e179a20157e17eb4eb0003&IDField=FileID&FileID=" + fileID + "&isRead=" + isRead;;
	String tabUrl1 = SystemPath.SYSTEMPATH + "/scripts/common/file/File_Info_Template.jsp?FormID=2c998636485d86c501485d988fcc0005&IDField=FieldID&FieldID=2c998614572123ad0157215815d10016";
	String tabUrl2 = SystemPath.SYSTEMPATH + "/scripts/common/file/File_Info_Template.jsp?FormID=2c998636485d86c501485e558bc50007&IDField=FileID&FileID=2c998614572123ad01572155f11b000e";
	try {
%>
<html>
	<head>
		<title><%=SystemPath.ConvertCode2("费用申请","ExpenseRequest",sVersion)%></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/style/blue/form.css">
		<script src="<%=request.getContextPath()%>/include/form.js"></script>
		<script src="<%=request.getContextPath()%>/include/function.js"></script>
		<script src='<%=request.getContextPath() %>/include/jquery-1.11.1.min.js'></script>
		<style type="text/css"></style>
	</head>
	
	<script language="JavaScript" type="text/JavaScript">
	var selectedTabIdx = 0;//默认显示的页签
	var titles = ["<%=title0%>","<%=title1%>","<%=title2%>"];//页签标题
	var tabUrl = ["<%=tabUrl0%>","<%=tabUrl1%>","<%=tabUrl2%>"];//对应页面URL
	function displayTab(tabIndex)
	{
		$("#tabTargetFrame").attr("src",tabUrl[tabIndex]);
		var tabTitles = $("#tabBar").find("div");
		var i = 0;
		$(tabTitles).each(function(){
			if(i==tabIndex)
			{
				$(this).removeClass("Tab-UnSelected");
				$(this).addClass("Tab-Selected");
			}else
			{
				$(this).removeClass("Tab-Selected");
				$(this).addClass("Tab-UnSelected");
			}
			i++;
		});
		selectedTabIdx = tabIndex;
	}
	//文档加载完成函数
	$(document).ready(function(){
		for(var i=0;i<titles.length;i++)
		{
			var div = "";
			if(i==selectedTabIdx)
			{
				div = "<div id='tabIndex'"+i+" class='Tab-Selected' style='float:left' onClick='displayTab("+i+")'>"+titles[i]+"</div>";
			}else
			{
				div = "<div id='tabIndex'"+i+" class='Tab-UnSelected' style='float:left' onClick='displayTab("+i+")'>"+titles[i]+"</div>";
			}
			$("#tabBar").append(div);
		}
		$("#tabTargetFrame").attr("src",tabUrl[selectedTabIdx]);
	});
	</script>

	<body bgcolor="#FFFFFF" text="#000000">
		<table>
			<tr>
				<td>
					<div id="tabBar">
					</div>
				</td>
			</tr>
		</table>
		<table width="100%" height="100%" cellspacing="0" cellpadding="0" class="Tab-Area">
			<tr>
				<td>
					<div id="tabTarget">
						<iframe id="tabTargetFrame" width="100%" height="100%" frameborder="0" scrolling="no" src="" ></iframe>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>
<script>

</script>
<%
	}catch(Exception er){
	 er.printStackTrace();
	}
%>

4.实现效果