实现此种局部更新的使用技术为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" οnclick="divswitch('flightDiv')">机票</a></li> <li><a href="#hotelDiv" οnclick="divswitch('hotelDiv')">酒店</a></li> <li><a href="#dinnerDiv" οnclick="divswitch('dinnerDiv')">餐饮</a></li> <li><a href="#ticketDiv" οnclick="divswitch('ticketDiv')">娱乐票</a></li> <li><a href="#carrentDiv" οnclick="divswitch('carrentDiv')">租车</a></li> <li><a href="#sceneDiv" οnclick="divswitch('sceneDiv')">景点</a></li> <li><a href="#guideDiv" οnclick="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); } }
实现过程如上！有兴趣可以尝试一下！！
