Tab页界面,用jQuery及Ajax技术实现_jquery

到了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页界面之二
本文来自: (www.jb51.net) 详细出处参考:http://www.jb51.net/article/20091.htm

时间: 2024-09-21 10:26:31

Tab页界面,用jQuery及Ajax技术实现_jquery的相关文章

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

网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用.实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据). 自己的开发的代码自己最清楚,用起来也应该最顺手,要扩展的话脑子也不犯晕.代码如下,还在不断修改中. 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

用jQuery技术实现Tab页界面之二_jquery

这是第二篇文章,第一篇可以参考Tab页界面,用jQuery及Ajax技术实现代码特点: 1,完全实现Tab逻辑功能,Tab的样式完全交由前端代码控制,很灵活. 2,tab页触发事件是click. 3,界面以table布局,只需要配置关键对象的class和id 即可工作. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

php基于jquery的ajax技术传递json数据简单实例_php技巧

本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi

jQuery之ajax技术的详细介绍_jquery

1:Ajax技术包含以下几点:基于Web标准(XHTML + CSS)的展示使用DOM进行动态显示和交互使用XMLHttpRequest进行数据交换和相关操作使用javascript将所有内容绑定在一起Ajax的核心是JavaScript的XMLHttpRequest对象,它是一种支持异步请求的技术.简而言之,使用JS可以控制XMLHttpRequest对象向服务器提出请求并处理响应,而不影响用户对页面的正常访问.对于XMLHttpRequest对象,不同的浏览器提供了不同的支持,IE是将其作为

利用jQuery及AJAX技术定时更新GridView的某一列数据_jquery

看到一个问题:定时更新GridView的某一列中的状态文本.马上就有了思路:GridView最后会生成表格,所以我们在页面中通过Ajax更新表格的列,从而达到ajax更新GridView的效果. 具体实现: 准备一个xml文件,用于存储要更新的数据,在页面中启动一个定时器,每隔5秒钟调用一个函数,函数里边通过$.ajax获取xml中的数据,解析xml,遍历表格行,匹配要更新的数据,更新. getuserlist.xml 定义一个UserList的根节点,下边每个UserItem对应一条数据,UI

Jquery操作Ajax方法小结_jquery

ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax() 可以不带任何参数直接使用. 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. 语法 jQuery.ajax([settings]) 参数

基于jQuery的ajax方法封装_jquery

ajax (ajax开发)简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在实际的项目里,ajax的应用频率很高

几种二级联动案例(jQuery\Array\Ajax php)_jquery

在开发过程中,遇到过非常多的二级联动,下面是我总结出来的几种二级联动案例 二级联动(1)  第一种案例是一种比较简单的二级联动,利用jquery的显示隐藏来实现,对于数据较少的二级联动来说可以采纳 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>二级联动</title> /*引入jquery文件*/ <script type=&quo

jQuery与Ajax以及序列化_jquery

关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发送和获取数据,然后更新页面. Ajax的优势 •无需插件支持 •优秀的用户体验 •提高web程序的性能 •减轻服务器和带宽的负担 Ajax的不足 •浏览器兼容不足 •破坏浏览器前进和后退按钮的正常功能 •对搜索引擎的支持不足 •开发和调试工具的 缺乏 好吧,这些都是几年前的不足.技术的发展很快,这些不足也会慢慢弥补,起码现在调试Ajax并不难.