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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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 显示指定路径下的图片
2009/10/29 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
python对url格式解析的方法
2015/05/13 Python
Python决策树分类算法学习
2017/12/22 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
怎么快速自学python
2020/06/22 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
列车长先进事迹材料
2014/01/25 职场文书
体育活动总结范文
2014/05/04 职场文书
高中学校对照检查材料
2014/08/31 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL