Tab页界面,用jQuery及Ajax技术实现


Posted in Javascript onSeptember 21, 2009

到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式。
网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用。实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据)。
自己的开发的代码自己最清楚,用起来也应该最顺手,要扩展的话脑子也不犯晕。代码如下,还在不断修改中。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> 
<html xmlns=”http://www.w3.org/1999/xhtml“> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 
<title>我的Tabs选项卡(Ajax版本)</title> 
<style type=”text/css”> 
body {font-size:12px; } 
#tab0,#tab1,#tab2 {background:url(images/gray.png); cursor:hand;} 
</style> 
<script type=”text/javascript” src=”jquery/jquery.js”></script> 
<script type=”text/javascript” src=”class.js”></script> 
<script type=”text/javascript” src=”my_ajax_tabs.js”></script> 
<script type=”text/javascript”> 
$(document).ready(function() 
{ 
//————————- 
//tabs 配置信息 
var tabs = [”#tab0″, “#tab1″, “#tab2″]; //tab 数组 id 
var datas = “#div_data”; //显示区对象的id号 
var event_type = “mouseover”; //触发事件(click/dblclick/mouseover/focus/…) 
var default_tab = “#tab0″; 
//切换图片 
var tab_selected_bgimg = “images/green.png”; 
var tab_unselected_bgimg = “images/gray.png”; 
//切换文本颜色 
var tab_selected_txtcolor = “#ff6600″; 
var tab_unselected_txtcolor = “#666666″; 
// 
urls = [ 
“my_ajax_server.php?app=tab0″, 
“my_ajax_server.php?app=tab1″, 
“my_ajax_server.php?app=tab2″, 
] 
//**Begin:固定代码********************************* 
for (var i=0; i<tabs.length; i++) 
{ 
$(tabs[i]).bind(event_type, handler); 
} 
$(default_tab).trigger(event_type); 
// 
function handler() 
{ 
//初始化缓存数组 
var localdatas = new Array(); //缓存浏览器本次数据 
for (var i=0; i<tabs.length; i++) 
{ 
localdatas[i]=”; 
} 
//重置所有tabs 
for (var i=0; i<tabs.length; i++) 
{ 
$(tabs[i]).css(”background-image”, “url(”+ tab_unselected_bgimg +”)”); 
$(tabs[i]).css(”color”, tab_unselected_txtcolor); 
} 
var curr_index; 
for(var i=0;i<tabs.length;i++) 
{ 
if($(tabs[i]).attr(”id”)==$(this).attr(”id”)) 
{ 
curr_index = parseInt(i); 
} 
} 
// 
$(this).css(”background-image”, “url(”+ tab_selected_bgimg +”)”); 
$(this).css(”color”, tab_selected_txtcolor); 
if(localdatas[curr_index]==”) 
{ 
//ajax获取数据(默认method=get) 
$.ajax 
({ 
url: urls[curr_index], //后台处理程序 
cache: false, 
timeout: 20000, 
error:function() 
{ 
alert(”error while submitting”); 
}, 
success:function(data) 
{ 
localdatas[curr_index] = data; //缓存浏览器本次数据 
$(datas).html(data); 
} 
}); 
} 
else 
{ //显示缓存数据 
$(datas).html(datas[curr_index]); 
} 
} 
//**End:固定代码********************************* 
//—————? 
}); 
</script> 
</head> 
<body> 
<table border=”0″ width=”500″ height=”25″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″> 
<tr> 
<td width=”97″ id=”tab0″>tab0</td> 
<td width=”30″></td> 
<td width=”97″ id=”tab1″>tab1</td> 
<td width=”30″></td> 
<td width=”97″ id=”tab2″>tab2</td> 
<td width=”149″></td> 
</tr> 
</table> 
<table border=”1″ width=”500″ height=”60″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″> 
<tr> 
<td> 
<div id=”div_data”></div> 
</td> 
</tr> 
</table> 
</body> 
</html>

my_ajax_server.php文件:
<?php 
/******************************************* 
* File: my_ajax_server.php 
********************************************/ 
error_reporting(7); 
set_magic_quotes_runtime(0); 
$app = $_GET['app']; 
switch ($app) 
{ 
case “tab0″: // 
?> 
from TAB0 
<?php 
break; 
case “tab1″: // 
?> 
from TAB1 
<?php 
break; 
case “tab2″: // 
?> 
from TAB2 
<?php 
break; 
default: 
echo ‘my_ajax_server.php error.'; 
break; 
} 
?>

张庆(网眼) 2009-9-18
看完这篇可以参考下一篇文章 用jQuery技术实现Tab页界面之二
本文来自: 三水点靠木(3water.com) 详细出处参考:https://3water.com/article/20091.htm
Javascript 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
vue+vue-router转场动画的实例代码
Sep 01 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
一个js写的日历(代码部分网摘)
Sep 20 #Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 #Javascript
js表格分页实现代码
Sep 18 #Javascript
ext 同步和异步示例代码
Sep 18 #Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 #Javascript
jQuery 事件队列调整方法
Sep 18 #Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 #Javascript
You might like
php 字符串替换的方法
2012/01/10 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
Python 正则表达式入门(中级篇)
2016/12/07 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
Python 将pdf转成图片的方法
2018/04/23 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
linux面试相关问题
2012/08/11 面试题
给老师的检讨书
2014/02/11 职场文书
元旦晚会活动总结
2014/07/09 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
js中Object.create实例用法详解
2021/10/05 Javascript