`
longgangbai
  • 浏览: 7250164 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于Jquery实现tab的局部更新

jQueryJavaScriptAjaxUIprototype 
阅读更多

实现此种局部更新的使用技术为JQuery和ProtoType js框架的整合

使用Tab的总结：首先下载jquery的插件datepicker插件：

在html中导入：

文件如下：

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
 </script>
    <script type="text/javascript" src="${ctx}/scripts/framework/prototype.js"></script>
  <script type="text/javascript" src="mytab.js">
   </script>
</head>
<body style="font-size:62.5%;">
  
<!-- -JQuery  tabs 的使用  -->
<div id="tabs">
<h3 class="color_orange" style="padding-left:0px">预定服务</h3>
  <ul> 
    <li ><a href="#flightDiv" onclick="divswitch('flightDiv')">机票</a></li>
    <li><a href="#hotelDiv" onclick="divswitch('hotelDiv')">酒店</a></li>
    <li><a href="#dinnerDiv" onclick="divswitch('dinnerDiv')">餐饮</a></li>
    <li><a href="#ticketDiv" onclick="divswitch('ticketDiv')">娱乐票</a></li>
     <li><a href="#carrentDiv" onclick="divswitch('carrentDiv')">租车</a></li>
    <li><a href="#sceneDiv" onclick="divswitch('sceneDiv')">景点</a></li>
    <li><a href="#guideDiv" onclick="divswitch('guideDiv')">导游</a></li>
  </ul>
 <!-- --机票 的 信息如下  -->
<div id="flightDiv"   >
</div>
<!-- 酒店信息 -->
<div id="hotelDiv" >
</div> 
<!-- 娱乐票 -->      
<div id="ticketDiv"  >
</div> 
  <!-- 餐饮信息 -->
<div id="dinnerDiv"  >
</div>
  <!-- 景点信息 -->
<div id="sceneDiv"   >
</div>
<!-- 租车信息 -->
<div id="carrentDiv"  >
</div>
<!-- 导游信息 -->
<div id="guideDiv" >
</div>
</div></body>
</html>

mytab.js内容如下：

 //初始化tab并加载首个tab的内容信息

jQuery(document).ready(function(){
        jQuery('#tabs').tabs();  //绑定页面中tab的id的
        divswitch("flightDiv");   //绑定加载时的第一个tab的内容的信息
      });
 
        //使用ProtoType实现Ajax的绑定的数据的div和url不同设置不同的相应方案
        function getHtml(placeHolder,myurl)
        {
            var planId=document.getElementById("tripPlanId").value;

            var paras="tripPlanId="+tripPlanId; //传递的参数是以查询字符串形式传递的
            var myajax=new Ajax.Updater(placeHolder,myurl,{
            method:'get', //处理的方法
           parameters:paras, //请求的字符串
           onFailure:reportError  //错误处理函数
           });
         //用于测试的信息
       //window.location.href="${ctx}/"+myurl+"?tripPlanId=242";

        }
        function reportError()
        {
           alert("Sorrty ,there was an error");
        }
       
        //根据选择不同的div标签调用不同的ajax更新函数
        function divswitch(divId)
        {
         //绑定的div的
         var  placeHolders=["flightDiv","hotelDiv","dinnerDiv","ticketDiv","carrentDiv","sceneDiv","guideDiv"];
          //绑定的文件名称
         var  urls=["pre-ticket","pre-hotel","pre-food","pre-vote","pre-rent-car","pre-place","pre-guide"];
        
         var url='/user/';
         //默认绑定id不存在
        var index=-1;
        
         for(var i=0;i<placeHolders.length;i++)
         {
            if(placeHolders[i]==divId)
            {
              index=i;
              break;
            }
         }
     
         //检测绑定的div 是否正确
         if(index==-1)
         {
             alert("请检测绑定的div 名称是否正确！");
             return ;
         }else{
              url=url+urls[index];
              url=url+"!list.dhtml";
             getHtml(placeHolders[index],url);
         }
        }

 

实现过程如上！有兴趣可以尝试一下！！

分享到：
| 项目开发中struts常用的标签总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics