## 說明 目前平臺中已經自帶了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> ```