Question

在一个页面中有多个Tab的问题

Answer 1

在一个页面中有多个Tab的问题可以这样来处理：
参照
工程项目管理/单位工程项目完工管理/申请列表
比如在此页面中有三个Tab切换：
那么要拆成四个页面一个Mange+三个Tab的页面
1、Manage页面：在Tabs中的TabsContent里面要有三个<div></div>这一定要有不能删掉。

<div class="page">
<div class="pageContent">
<div class="tabs" currentindex="2" eventtype="click">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li><a href="a.aspx" class="j-ajax"
><span>名称1</span></a></li>
<li><a href="b.aspx" class="j-ajax"
><span>名称2</span></a></li>
<li><a href="c.aspx" class="j-ajax"
><span>名称3</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" >
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
</div>
</div>
</div>
</div>
2、其他的三个页面的格式为：
<div class="panelBar">
<form id="pagerForm"
action="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx"
method="post">
<input type="hidden" name="status" value="active"/>
<input type="hidden" name="pageNum" />
<input type="hidden" name="numPerPage" value="<%=numPerPage.Value%>" />
</form>
<ul class="toolBar">
<li><a class="delete"
href="ProjectManage/FinishedProject/FinishedProjectManageAuditFinished.aspx?fuid={sid_fin}"
target="navTabTodo"
title="确定要反审核吗?"><span>反审核</span></a></li> </ul>
</div>
<table class="table" layouth="138">
</table>
<div class="panelBar">
<div class="pages">
<span>显示</span>
<select id="numPerPage" runat="server"
onchange="tabPageBreak(gpage.jObj('tab2'),{numPerPage:this.value})">
<option value="3" selected="selected">3</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
<span>条，共<%=total %>条</span>
</div>
<div class="pagination" targettype="navTab" totalcount="<%=total
%>" numperpage="<%=numPerPage.Value %>" currentpage="<%=pageNum %>" tab="tab2">
</div>
</div>
3、在其他的三个页面中一开始就应该写<div class="panelBar"></div
class="panelBar">，前面的样式不需要，因为我们加载的时候前面的样式已经加载了所以只需要从panelBar开始加载即可。
比如上面显示处理分页的pagerForm也可以放到pagelBar里面。不能放到外面，不会加载的。
4、对于分页因为涉及到多个Tab的同时分页的问题，但是一个页面只有一个pagerForm考虑到假如修改为多个pagerForm的话，问题更加繁琐，
所以现在我们拆开来处理。里面的分页稍作了修改，以前我们用navTabPageBreak()；现在我们用tabPageBreak并将当前tab2加了前缀的的值传到脚本中。