[给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果,实现数据加载(二)
来源:互联网 发布:java详细设计文档模板 编辑:程序博客网 时间:2024/06/05 11:02
使用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中关于数据存储,取出存储在超链接上的数据 contentvar 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
[原创地址] [源码下载] [更多原创,多多支持多]
- [给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果,实现数据加载(二)
- [给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果,实现数据加载
- C#实现仿新浪微博 BigPipe 数据加载方式
- AJAX学习心得分享----(二)使用JQuery实现AJAX效果
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
- jQuery 写的仿新浪微博 向下滚动效果
- jQuery 写的仿新浪微博 向下滚动效果
- jQuery实现折叠效果
- jquery Ajax 实现加载数据前动画效果
- RadioGroup实现仿新浪微博的效果
- Android ProgressBar 自定义样式(二),仿原来新浪微博图片加载样式
- 仿新浪微博2014之登陆界面二(异步加载图片和缓存)
- 仿新浪微博2014之登陆界面二(异步加载图片和缓存)
- 仿新浪微博返回顶部的js实现(jQuery)
- JQuery实现仿sina新浪微博新鲜事滚动
- jQuery仿手风琴效果另一种实现方式,非插件.原创
- jQuery 实现折叠面板效果
- 字符设备驱动分析
- Package .XXXrpm is not signed(包未签署错误)
- [C++ 学习] C++ Primer 习题 4.36 指针数组 & 数组指针
- 用next_permutation计算全排列
- 测试DOCTYPE在各种浏览器上的Quirks模式和标准模式
- [给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果,实现数据加载(二)
- [更新中]H8OJ刷题记录
- Windows下用Eclipse搭建C/C++开发环境
- 排序算法 - 堆排序 (C++)
- Android屏幕密度(Density)和分辨率的关系
- VMware下安装ArchLinux
- Axis2 Web服务配置文件services.xml详解
- PruferCode相关
- The Difference Between jQuery’s .bind(), .live(), and .delegate()