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'"