实现多页签功能

来源：互联网发布：制作软件编辑：程序博客网时间：2024/05/22 22:39

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 = {                        //对应页面URLSystemPath.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'"

0 0