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


      使用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
 [原创地址]
    [源码下载]    [更多原创,多多支持多]

你可能感兴趣的:(PHP,jQuery,通知,javascript,js,jquey,仿新浪,新浪微博,jquery,div,数据库,存储)