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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
JSON取值前判断
Dec 23 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
jquery实现楼层滚动效果
2018/01/01 jQuery
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
英文自荐信
2013/12/19 职场文书
银行工作检查书范文
2014/01/31 职场文书
政风行风评议工作总结
2014/10/21 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
python文件目录操作之os模块
2021/05/08 Python
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python