jQuery tab 带刷新效能 _Web前端

jQuery tab 带刷新功能

刷新的功能实际就是给每一个层里放一个浮动框架，点击tab后，让它包含的浮动框架的location.reload()一下就能得到最新数据；代码很简单，我就不多说了。
*.js和*.css
可以从jQuery的官网上下载。另一个mytab.js的代码已在下面给出。

<%@ page contentType="text/html; charset=UTF-8"%>
<%
String webapp = request.getContextPath();
%>
<HTML>
<HEAD>
<%-- <meta http-equiv=refresh content="10">--%>
<%@ include file="/gmp/common/theme.jsp"%>
<link type="text/css" href="<%=webapp %>/hrms/renshizonghe/pingYi/css/jquery-ui.css" rel="stylesheet" ></link>
<script type="text/javascript" src="<%=webapp %>/hrms/resource/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=webapp %>/hrms/renshizonghe/pingYi/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="<%=webapp %>/hrms/renshizonghe/pingYi/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="<%=webapp %>/hrms/renshizonghe/pingYi/js/jquery.ui.tabs.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="<%=webapp %>/hrms/renshizonghe/pingYi/js/mytab.js"></script>
</HEAD>

<body>
<!-- -JQuery  tabs 的使用  -->
<div id="tabs">
<h3 class="color_orange" style="padding-left:0px;text-align: center;">评议结果&nbsp;&nbsp;&nbsp;<a href="javascript:history.back(1)"><font color="blue">返回</font></a></h3>
  <ul> 
    <li ><a href="#touPiaoRenShuDiv" onclick="tiHuanDiv('touPiaoRenShuDiv')">评议人数</a></li>
    <li><a href="#touPiaoMingCeDiv" onclick="tiHuanDiv('touPiaoMingCeDiv')">评议人名册</a></li>
    <li><a href="#beiTouPiaoRenDeiFenDiv" onclick="tiHuanDiv('beiTouPiaoRenDeiFenDiv')">被评议人得分</a></li>
    <li><a href="#pingYiXiangXiBiaoDiv" onclick="tiHuanDiv('pingYiXiangXiBiaoDiv')">评议情况详细表</a></li>
     <li><a href="#showPingYiMingXiDiv" onclick="tiHuanDiv('showPingYiMingXiDiv')">评议明细表</a></li>
  </ul>
<div id="touPiaoRenShuDiv"   >
<iframe width="100%" height="650" name ="touPiaoRenShuDiv" frameborder=0 scrolling=auto src="<%=webapp %>/HeadChart?chartid=TouPiaoRenShu_Chart&id=${templateId }"></iframe>
</div>
<div id="touPiaoMingCeDiv" >
<iframe width="100%" height="650" name="touPiaoMingCeDiv"  frameborder=0 scrolling=auto src="showTouPiaoMingCeByCell.action?templateId=${templateId }"></iframe>
</div> 
<div id="beiTouPiaoRenDeiFenDiv"  >
<iframe width="100%" height="650" name="beiTouPiaoRenDeiFenDiv" frameborder=0 scrolling=auto src="listPyr.action?templateId=${templateId }"></iframe>
</div> 
<div id="pingYiXiangXiBiaoDiv"  >
<iframe width="100%" height="650" name="pingYiXiangXiBiaoDiv" frameborder=0 scrolling=auto src="showBpyrDeFenByCell.action?templateId=${templateId }"></iframe>
</div>
<div id="showPingYiMingXiDiv"  >
<iframe width="100%" height="650" name="showPingYiMingXiDiv" frameborder=0 scrolling=auto src="showPingYiMingXiByCell.action?templateId=${templateId }"></iframe>
</div>
</div>
</body>
</HTML>

以下mytab.js代码

<script type="text/javascript">
//初始化tab并加载首个tab的内容信息
? var srcs = {"touPiaoRenShuDiv":"<%=webapp %>/HeadChart?chartid=TouPiaoRenShu_Chart&id=${templateId }",
?????????????????? "touPiaoMingCeDiv":"showTouPiaoMingCeByCell.action?templateId=${templateId }",
?????????????????? "beiTouPiaoRenDeiFenDiv":"showBpyrDeFenByCell.action?templateId=${templateId }",
?????????????????? "pingYiXiangXiBiaoDiv":"listPyr.action?templateId=${templateId }",
?????????????????? "showPingYiMingXiDiv":"showPingYiMingXiByCell.action?templateId=${templateId }"};
jQuery(document).ready(function(){
???? 
??????? try{
???????? jQuery('#tabs').tabs();? //绑定页面中tab的id的
???????? tiHuanDiv("touPiaoRenShuDiv");?? //绑定加载时的第一个tab的内容的信息
??????? }catch(err){
???????? jQuery(window).error(function(){return true;});
??????? }
??????? //根据选择不同的div标签调用不同的ajax更新函数
?????? 
?????? 
????? });
?? function tiHuanDiv(divId)
??????? { 
????????? var it = eval(divId);
????????? var url = "";
????????? switch(divId){
????????? ?case "touPiaoRenShuDiv": url=srcs.touPiaoRenShuDiv;break;
????????? ?case "touPiaoMingCeDiv": url=srcs.touPiaoMingCeDiv;break;
????????? ?case "beiTouPiaoRenDeiFenDiv": url=srcs.beiTouPiaoRenDeiFenDiv;break;
????????? ?case "pingYiXiangXiBiaoDiv": url=srcs.pingYiXiangXiBiaoDiv;break;
????????? ?case "showPingYiMingXiDiv": url=srcs.showPingYiMingXiDiv;break;
????????? }
????????? it.window.location.href=url;
????????? 
????????? 
??????? }
??????

</script>

?效果截图