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 相关文章推荐
基于jquery自定义图片热区效果
Jul 21 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
VUE动态生成word的实现
Jul 26 Javascript
一个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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
Python实现截屏的函数
2015/07/25 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python3 读取Excel表格中的数据
2018/10/16 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
python Gabor滤波器讲解
2020/10/26 Python
如何一键升级Python所有包
2020/11/05 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
财务总监管理岗位职责
2014/03/08 职场文书
师德建设实施方案
2014/03/21 职场文书
优质服务口号
2014/06/11 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
Golang的继承模拟实例
2021/06/30 Golang