关于Jquery实现tab的局部更新

longgangbai

浏览: 7325857 次
性别:
来自: 上海

最近访客更多访客>>

sdcharles

paladin1988

ljq867

yuxiangtong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery的开发应用

jQuery JavaScript Ajax UI prototype

实现此种局部更新的使用技术为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);
         }
        }

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

分享到：

关于Jquery实现datepicker实现国际化的应用 | 项目开发中struts常用的标签总结

2009-06-09 11:23
浏览 4831
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论