实现此种局部更新的使用技术为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实现tab页主要涉及元素的隐藏与显示,通常使用`.hide()`和`.show()`方法,结合事件监听如`click`。当用户点击某个tab时,隐藏其他内容,显示对应的隐藏区域。同时,可以通过添加样式以突出当前选中的tab。 三...
在使用 jQuery 实现 Tab 功能时,都是获取鼠标在 mousenter 或 click 时的 index 值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉。在使用 Vue 实现 Tab 功能时,不是像 jQuery 一样直接操作 DOM,...
本案例主要探讨如何基于AdminLTE(一个基于Bootstrap的开源后台主题)利用iframe和JavaScript实现局部刷新功能,以提升用户体验。 AdminLTE是一个免费的响应式后台模板,其设计灵感来源于Twitter的Bootstrap框架,...
局部刷新通常涉及到对DOM元素的增删改查,通过JavaScript或相关的库(如jQuery)来实现。例如,当接收到新的数据时,可以找到对应的DOM节点并更新其内容,而不是重新加载整个页面。 2. **Ajax技术**:Ajax...
它通过在后台与服务器进行少量数据交换,使网页实现局部刷新,从而提高了用户体验。本示例将详细介绍如何利用Ajax和PHP来实现网页上的Tab效果。 首先,理解Tab效果的基本原理:在网页上,Tab通常用于组织内容,用户...
局部刷新允许用户在不重新加载整个页面的情况下更新特定部分,从而提高用户体验和效率。 Bootstrap框架提供了丰富的CSS样式、JavaScript组件和网格系统,使得开发者能够快速地创建出美观且易于使用的界面。在这个...
对于局部更新,还有其他解决方案,如jQuery的`.load()`函数或使用第三方库如jQuery UI的Tab控件,它们同样可以实现局部刷新。值得注意的是,随着前端框架的流行,如AngularJS、React和Vue,它们提供了更高级的组件化...
在IT行业中,页面局部刷新是一项重要的技术,它能够提高用户体验,减少整个网页的加载时间,尤其是在数据频繁更新或用户交互频繁的场景下。本话题主要围绕“页面局部刷新”这一主题展开,结合提供的标签“源码”和...
- **简介**:一个关于如何使用jQuery制作滑动菜单的教程。 - **特点**: - 逐步指导,易于跟随。 - 包含了所有必要的代码片段。 ##### 11. Animated DropDown Menu with jQuery - **简介**:使用jQuery实现的具有...
5. **AJAX交互**:BJUI支持AJAX无刷新交互,可以轻松地加载数据,实现页面局部更新,提升应用的响应速度。这对于后台管理系统来说尤其重要,因为它通常涉及到大量数据的动态加载和显示。 6. **主题定制**:BJUI允许...
3、通过DOM方法或jQuery方法将数据载入页面,事件响应刷新完成。 $('#input_date').keypress(function(e){ if(e.keyCode=='13'){ $.ajax({ type: "POST", url: "inquire_date.php", data: {
2. **局部刷新**:Ajax Tab通过局部更新页面内容,提高用户体验,避免了传统方式下整个页面的刷新,减少了网络传输的数据量。 3. **Tab组件**:Tab是一种常见的网页布局元素,用于将大量信息分组到不同的选项卡下,...
5. jQuery Tools / Scrollable:Scrollable 组件可以在网页中实行定制的、局部的滚动,在现代 Web 设计中,这几乎是最受欢迎的一种技术,可以用在产品目录、滚动新闻、在表单中实现定制选择框、浏览图片库、视频播放...
* Scrollable:可滚动容器是 jQuery Tools 中的一个非常重要的组件,jQuery Tools / Scrollable 可以在网页中实行定制的、局部的滚动。 使用 jQuery Tools 的优点 使用 jQuery Tools 可以带来以下优点: * 提高...
jQuery封装了AJAX方法,如`$.ajax()`, `$.get()`, `$.post()`等,使得异步数据请求和页面局部更新变得更加简单。这对于实现无刷新加载、动态内容更新等功能至关重要。 10. **自定义插件** jQuery的插件机制允许...
jQuery作为一款强大的JavaScript库,提供了丰富的API和插件来实现这种功能。本项目"jQuery左右滚动支持图片放大缩略图图片轮播代码"提供了一种高效的解决方案,包含了一个可直接使用的demo,下面我们将详细探讨这个...
在提供的"jquery iframe tab实例"中,应该包含了实现以上功能的HTML、CSS和JavaScript代码示例。通过学习和理解这些代码,开发者可以快速掌握如何在自己的项目中实现类似的功能。 总的来说,动态创建页签结合jQuery...
在JavaScript中实现Tab切换效果是常见的前端开发任务,主要用于创建用户友好的交互界面。下面将详细解释如何通过JS实现这个功能,以及涉及到的关键知识点。 首先,Tab切换效果的基本原理是利用CSS隐藏和显示不同的...
可以使用事件委托来减少事件监听器的数量,或者利用局部变量存储当前选中的Tab,避免频繁的DOM操作。 在"texiao4300_1560680869"这个压缩包文件中,可能包含了实现上述功能的HTML、CSS和JavaScript代码文件。通过...
局部变量与全局变量作用域 递归 函数式编程与函数不同 高阶函数 第4周 上节内容回顾 心灵鸡汤 装饰器详解 装饰器应用详解 装饰器之函数即变量 装饰器之高阶函数 装饰器之嵌套函数 装饰器之案例剖析 装饰器之高潮...