JQuery应用四：滑片效果
页面HTML如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery_Study_Tab</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
<link rel="stylesheet" type="text/css" href="css/tab.css">
</head>
<body>
<ul id="tabfirst">
<li class="tabin">标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
<div class="contentfirst contentin">内容1</div>
<div class="contentfirst">内容2</div>
<div class="contentfirst">内容3</div>
<br/>
<br/>
<br/>
<ul id="tabsecond">
<li class="tabin">装入完整页面</li>
<li>装入部分页面</li>
<li>从远程获取数据</li>
</ul>
<div id="contentsecond">
<img src="images/img-loading.gif" alt="数据加载中！">
<div id="realContent"></div>
</div>
</body>
</html>
css样式如下：
ul,li {
list-style: none;
text-align: center;
font-size: 12px;
}
ul {
padding: 10px;
margin: 0px;
}
#tabfirst li {
float:left;
background-color:#868686;
color:white;
padding:5px;
margin-right:2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color:#6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
/**
* clear：该属性的值指出了不允许有浮动对象的边
* none：允许两边都可以有浮动对象 both：不允许有浮动对象
* left：不允许左边有浮动对象 right：不允许右边有浮动对象
**/
clear:left;
background-color:#6E6E6E;
color:white;
width:400px;
height:100px;
padding:10px;
display:none;
}
div.contentin {
/**
* display block：CSS1块对象的默认值。用该值为对象之后添加新行
**/
display:block;
}
#tabsecond li {
float:left;
background-color: white;
color:blue;
padding:5px;
margin-right:2px;
/**
* cursor：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
**/
cursor: pointer;
}
#tabsecond li.tabin {
background-color: #F2F6FB;
border: 1px solid black;
border-bottom: 0;
/**
* z-index：检索或设置对象的层叠顺序。
**/
z-index:100;
/**
* position：检索对象的定位方式。
* static：无特殊定位，对象遵循HTML定位规则
* absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
* relative：对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
* fixed：IE5.5及NS6尚不支持此属性
**/
position:relative;
}
#contentsecond {
width: 500px;
height: 140px;
padding: 10px;
background-color: #F2F6FB;
clear:left;
border: 1px solid black;
position:relative;
top:-1px;
}
img {
display: none;
}
js代码：
$(document).ready(function(){
/*
//找到所有的标签
$("li").mouseover(function(){
$("div.contentin").hide();
}).mouseout(function(){
});
*/
$("#tabfirst li").each(function(index){//i表示当前所选中的标签
$(this).mouseover(function(){
var liNode = $(this);
//延迟处理 防止用户恶意划动
timeoutid = setTimeout(function(){
$("div.contentin").removeClass("contentin");
$("div.contentfirst").eq(index).addClass("contentin");
$("#tabfirst li.tabin").removeClass("tabin");
liNode.addClass("tabin");
},300);
}).mouseout(function(){
clearTimeout(timeoutid);
});
});
//load()方法：载入远程 HTML 文件代码并插入至 DOM 中
$("#realContent").load("tabLoad.html");
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if(index==0){
$("#realContent").load("tabLoad.html");
}else if(index==1){
$("#realContent").load("tabLoad.jsp h2");
}else if(index==2){
$("#realContent").load("tabData.jsp");
}
});
});
//对于所有Ajax请求开始执行的方法
$("#contentsecond img").bind("ajaxStart",function(){
$(this).show();
$("#realContent").html("");
//Ajax请求结束执行的方法
}).bind("ajaxStop",function(){
$(this).hide();
});
});
其中load方法加载的页面如下：
<html>
<head>
<title>动态加载数据</title>
</head>
<body>
<h2 align="center">Hello Word</h2>
</body>
</html>
<html>
<head>
<title>tabLoad.html</title>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
<html>
<head>
<title>远程输出数据</title>
</head>
<body>
<div>
<%
out.println("远程输出数据！");
%>
</div>
</body>
</html>