Tab页界面 用jQuery及Ajax技术实现(php后台)


Posted in Javascript onOctober 12, 2011

网上的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; 
} 
?>
Javascript 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
JS触摸事件、手势事件详解
May 04 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 #Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 #Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 #Javascript
namespace.js Javascript的命名空间库
Oct 11 #Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 #Javascript
jquery.tmpl JQuery模板插件
Oct 10 #Javascript
brook javascript框架介绍
Oct 10 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
thinkphp命名空间用法实例详解
2015/12/30 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
JQuery写动态树示例代码
2013/07/31 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
js随机生成一个验证码
2017/06/01 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
Python isinstance判断对象类型
2008/09/06 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
公司成立感言
2014/01/11 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
模具数控专业自荐信
2014/01/27 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
2016特色励志班级口号
2015/12/24 职场文书
PHP解决高并发问题
2021/04/01 PHP
Android实现图片九宫格
2022/06/28 Java/Android