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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
JS中的三个循环小结
Jun 20 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python绘制高斯曲线
2021/02/19 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
幼儿园运动会入场词
2014/02/10 职场文书
项目申请汇报材料
2014/08/16 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
投资合作意向书范本
2015/05/08 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android