使用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仿新浪微博通知折叠/显示效果,实现数据加载二 |
本例源码下载: 20120331jquery.rar
[原创地址] [源码下载] [更多原创,多多支持多]
[原创地址] [源码下载] [更多原创,多多支持多]