## 说明 目前平台中已经自带了tab页前端组件，开发时只需要生成对应的html页面即可。 * * * * * ### 实现方式一：平台框架 1、实现tab页面的cmd命令 ``` /** * @Title: viewTabs * @Description: tabs页 * @param uc 系统自带用户会话内容 * @param id BOID * @param bindId 流程ID * @return * @throws Exception */ @Mapping("com.youngheart.apps.oa.vacation_home") public String home(UserContext uc) throws Exception { Map<String, Object> result = new HashMap<String, Object>(); result.put("id", id); result.put("bindId", bindId); result.put("sid", uc.getSessionId()); return HtmlPageTemplate.merge("APPID","vacation_viewTabs.htm", result); } ``` 2、同鼎利框架实现 * * * * * ### 实现方式二：鼎利框架 1、 实现tab页面的cmd命令 ``` /** * @Title: viewTabs * @Description: tabs页 * @param uc 系统自带用户会话内容 * @param id BOID * @param bindId 流程ID * @return * @throws Exception */ @Mapping("com.actionsoft.apps.asset.card_viewTabs") public String cardTabs(UserContext uc, String id, String bindId) throws Exception { // 初始化返回结果 HashMap<String, Object> result = new HashMap<String, Object>(); result.put("id", id); result.put("bindId", bindId); result.put("sid", uc.getSessionId()); // 这里的viewFr是鼎利集成的VIEW层框架 return viewFr("viewTabs", result); } ``` 2、template/page页面中添加htm文件 >页头 ``` <link rel="stylesheet" type="text/css" href="../commons/css/awsui.css" /> <script type="text/javascript" src="../commons/js/jquery/scripts/jquery.js"></script> <script type="text/javascript" src="../commons/js/awsui.js"></script> <script type="text/javascript" src="../commons/js/public.js"></script> ``` > js部分 ``` // tab页路径配置 var url = { tabId1 : '页面路径1', tabId2 : '页面路径2', ... }; // 组件渲染 $(function(){ $("#formTab").trigger('click'); $("#content>div").height($(document).height() - 40); }); // tab标签点击事件 function onchange(tab, newTabId) { var frameObj = $("#" + newTabId + "Frame"); var commonUrl = "../commons/wait.htm"; if (frameObj.attr("src") == commonUrl) { frameObj.attr("src", url[newTabId]); } else { return false; } } ``` > html部分 ``` <div id="FormTabPanel" style="padding-top: 3px; padding-left: 10px; text-align: left;" class="awsui-simple-tab" contentid="content" onchange="onchange"> <a tit="tabId1" id="formTab">tab1</a> <a tit="tabId2">tab2</a> ... </div> <div id="content" style="height:auto;border:0px;border-top:0px;"> <div tit="tabId1" style="height:auto;padding:0px;"> <iframe id='tabId1Frame' name="tabId1Frame" marginheight="0" marginwidth="0" frameborder="0" src="../commons/wait.htm" width="100%" height="100%"></iframe> </div> <div tit="tabId2" style="height:auto;padding:0px;display:none;"> <iframe id='tabId2Frame' name="tabId2Frame" marginheight="0" marginwidth="0" frameborder="0" src="../commons/wait.htm" width="100%" height="100%"></iframe> </div> ... </div> ```