租船合同多视图展示-优快云博客

本文链接：https://blog.youkuaiyun.com/fenyu8/article/details/60768404

1.实现效果图

2.实现jsp和js

<%@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 pageTitle = "租出船合同";
	String[] titles = {"租出船合同视图","租出船合同表单","视图和表单"};//页签标题
	String[] tabUrls = {                        //对应页面URL
		SystemPath.SYSTEMPATH + "/scripts/common/view/File_View_Template.jsp?viewid=2c9986125a64f985015a650fae870002",
		SystemPath.SYSTEMPATH + "/scripts/common/file/File_Info_Template.jsp?FormID=2c9986125a69193f015a69193f9a0000&IDField=FileID&FileID=",
		SystemPath.SYSTEMPATH + "/scripts/common/view/OnClickViewModule_Template.jsp?viewid=2c9986125a64f985015a650fae870002&viewHeight=40%&formHeight=60%&condition=CP_TYP='VC-OUT'"
	};
	try {
%>
<html>
	<head>
		<title><%=pageTitle%></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 = new Array();//页签标题
	var tabUrls = new Array();//对应页面URL
	<%
	for(int i=0;i<titles.length;i++)
	{
	%>
		titles.push("<%=titles[i]%>");
		tabUrls.push("<%=tabUrls[i]%>");
	<%
	}
	%>
	function displayTab(tabIndex)
	{
		$("#tabTargetFrame").attr("src",tabUrls[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",tabUrls[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();
	}
%>

3.注意点

3.1 页签的实现

3.2 打开列表界面的url

SystemPath.SYSTEMPATH + "/scripts/common/view/File_View_Template.jsp?viewid=2c9986125a64f985015a650fae870002"

3.3 打开表单界面的url

SystemPath.SYSTEMPATH + "/scripts/common/file/File_Info_Template.jsp?FormID=2c9986125a69193f015a69193f9a0000&IDField=FileID&FileID="

3.4 打开列表和表单上下分屏界面url

SystemPath.SYSTEMPATH + "/scripts/common/view/OnClickViewModule_Template.jsp?viewid=2c9986125a64f985015a650fae870002&viewHeight=40%&formHeight=60%&condition=CP_TYP='VC-OUT'"

实现多页签功能