您的位置：首页 > Web前端 > JQuery

[给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果，实现数据加载（二）

2012-04-06 18:03 1121 查看

使用jQuery-ajax仿新浪微博通知折叠/显示效果，实现加载(二)

接上文，代码主要分为前台页面和服务器端页面，前台页面主要是实现布局，使用jquery给超链接添加事件（记得阻止默认事件），使用ajax异步请求服务器端数据库，服务器端根据客户端的id返回相应的结果。目前服务器端内容是写死的。

客户端页面：

<!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>jQuery-ajax实现的弹出菜单效果</title>
<style>
.list{
list-style-type:none;
}

.list li{
line-height:30px;
border-bottom:1px #666 dashed; }

.list li a{
color:#666;
text-decoration:none;}

.list li a:hover{
color:#F90;}

div{
background-color:#DDEBF0;}

</style>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>

<script>
$(document).ready(function(){

//点击每个li中a的时候触发事件
$(".list li a").click(function (evt){

//在jquery中阻止默认事件
evt.preventDefault();  //阻止超链接跳转

var t=$(this);
//jquery中关于数据存储，取出存储在超链接上的数据 content
var div =t.data("content");

//如果说取到数据了，下拉显示出来
if(div){

//使用slideToggle来动态的显示/隐藏div
div.slideToggle("slow");

}else{
//如果没有取到，则创建一个div,并且让div显示到超链接的后面

//创建一个超链接
div=$("<div></div>");

//创建完了div以后，先把div保存到超链接上
t.data("content",div);

//给div添加内容
div.html("Loading.......");

//显示到超链接的后面去
t.after(div);

//获取原来的div的高度
var oh=div.height();

//先把新创建的div进行隐藏
div.hide();

//怎么样才能向div中插入新查询的数据
div.load(t.attr("href"),function(){

//获取新的高度
var nh=div.height();
//把当前的div的高度设置为以前的高度
div.height(oh);

//执行动画效果，让高度从oh变到nh
div.animate({height:nh},"slow");

});

//先把新创建的div隐藏后再进行显示，目的就是要个优美的滑动效果
div.show("slow");

}

});

});

</script>
</head>

<body>
使用jQuery-ajax仿新浪微博通知折叠/显示效果，实现数据加载、弹出效果<br> CSDN李伟老师 微博：http://weibo.com/csdnliwei
<ul class="list">
<li><a href="20120331jquery-ajax-caidan-server.php?id=1">11111111</a></li>
<li><a href="20120331jquery-ajax-caidan-server.php?id=2">222222222</a></li>
<li><a href="20120331jquery-ajax-caidan-server.php?id=3">3333333333</a></li>
<li><a href="20120331jquery-ajax-caidan-server.php?id=4">44444444444</a></li>
<li><a href="20120331jquery-ajax-caidan-server.php?id=5">55555555555</a></li>
<li><a href="20120331jquery-ajax-caidan-server.php?id=6">66666666666</a></li>

</ul>
</body>
</html>

服务端页面：

<?php
$id=$_GET['id'];
sleep(2);
if($id==1){

echo "11111111<br>
11111111<br>
11111111<br>
11111111<br>";

}
if($id==2){

echo "222222<br>
222222<br>
222222<br>
12222222<br>";

}
if($id==3){

echo "3333<br>
33333<br>
3333<br>
133333<br>";

}
if($id==4){

echo "44444<br>
4444444<br>
444444<br>
44444444<br>";

}

if($id==5){

echo "555555<br>
5555555<br>
55555555<br>
55555555<br>";

}
if($id==6){

echo "6666<br>
6666666<br>
66666666<br>";

}

?>

[给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果，实现数据加载（二）

本例源码下载：

20120331jquery.rar
(1.78 KB, 下载次数: 0)

7 秒前上传
下载次数: 0

[原创地址] [源码下载]
[更多原创，多多支持多]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 新浪微博 div function 服务器 jquery xhtml

相关文章推荐

新的分享

章节导航