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

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

2012-04-06 17:50 1061 查看

   使用jQuery-ajax仿新浪微博通知折叠/显示效果，实现数据加载、弹出效果

   大家看这是新浪微博的消息页面的一条通知，怎么实现点击后显示全部、点击后再折叠起来呢？

   其实技术很简单，我实现的估计比新浪还稍微复杂一些，大家来看看我分析。

   实现思路：

   1）将默认显示的内容先放到ul中的

   2）使用jquery找到ul,并且给ul的每一个li 中的超链接都加上单击事件

   3）将要加载的内容（放到div中）显示到当前超链接的后面

   4）将加载的内容暂存在超链接上（jquery存储机制），通过判断超链接是否存储div元素来判断是否要创建div

   5）使用slideToggle 来进行点击超链接后 div的显示/隐藏

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

   7）加载内容到div中使用jquery的load方法

   实现截图如下：

)

初始情况

)

点击超链接一次，显示loading 效果

)

最终效果

服务端这里我只是根据id做了数据的输出，是写死的，并没有真正到数据库查询，但是事实上我的可以根据id到数据库查询的。

源代码见使用jQuery-ajax仿新浪微博通知折叠/显示效果，实现数据加载二

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

20120331jquery.rar
[原创地址] [源码下载]
[更多原创，多多支持多]

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

标签： 新浪微博 jquery div 数据库存储

相关文章推荐

新的分享

章节导航