词条统计
浏览次数:4617 次
编辑次数:8次 历史版本
最近更新:2013/6/20
创建者:掷鸡蛋者

在微博中有一个效果,就是点击“评论”,自动展开评论列表(如果网速较慢,会出现loading图标),如下图所示:


展开中(loading)——



展开后——



点击“隐藏评论”,评论列表又再次收起。


这是一个提升用户体验的常见功能,在wojilu 框架1.6中已经集成。它的实现有如下2个步骤:


1)制作一个页面,用于展示评论列表(这里只是以评论为例,不一定是评论)。

这没有什么特殊的,按照平常的方式建立一个action和对应的视图即可。
注意:整个视图必须用一个div包起来。


2)将这个评论列表挂接到评论命令中。


在需要显示评论列表的地方,也就是“评论”这个命令中加上如下标志:

<span class="</font><font class=" apple-style-span"="" size="2" color="#0000FF"><span class="frmUpdate" href="CommentList/36.aspx" loadTo="commentList129" txtHidden="隐藏评论">评论(1)</span>


语法说明:


 frmUpdate必须定义一个名叫 frmUpdate 的class
 href数据列表所在的网址
 loadTo数据列表展开后,需要加载的那个页面容器的ID, 比如上面的 commentList129 就是指已经在页面中定义好的
<div id="commentList129" style="display:none"></div>
注意:这个commentList129元素初始状态必须是隐藏的,否则必须连续两次点击才能出现
 txtHidden   当点击了更新器之后,文本切换成的样子,可以不定义。如果不定义,则直接使用更新器的text,比如上面的 “评论(1)”  



【特别说明】

1、被展开的页面本身,必须用一个div元素包起来。否则更新器在获取iframe之后,无法正确指定iframe的高度。

2、如果要直接呈现框架页面,比如通过js直接click控件,必须保证loadTo的目标是display:none状态

3、如果是在前台,必须加上js启用一下(后台默认已经启用这个功能,但前台没有):
$(document).ready( function() {
   
wojilu.ui.frmUpdate();
});