给微博添加伸缩功能

按照网友夙興夜寐罔徒勞的建议探讨下如何给记录／微博添加一个类似百度贴吧里的功能：展开和收起回复。

这是百度贴吧楼内楼效果图:

这是展开的效果

然后这是收拢的效果

这是个客户端的改动。分下面几步：
１）为了能在记录网页重新显示时（如删除回复时）保持用户的展开收起选择，我们要将用户的选择存放在浏览器的cookie里，所以我们要利用一个专门处理cookie的javascript库函数文件 js.cookie.js，在这里 https://raw.githubusercontent.com/js-cookie/js-cookie/v2.1.2/src/js.cookie.js 下载后放入网站的文件夹 static/js 里。
２）在模版文件 template/default/home/space_doing.htm 里添加展开回复／收起回复链接：在下面这句代码

<span class="y"></span>

复制代码

前添加

<span class="y">< a id="replytoggle_{$key}_$doid" class="replytoggle" href="javascript:;" onclick="javascript: toggleDisplay('{$key}_$doid');" style="color: blue !important; cursor: pointer;"></a></span>
<span class="y pipe">|</span>

复制代码

３）在同一文件的末尾这句

复制代码

前添加

<script type="text/javascript" src="{$_G[setting][jspath]}js.cookie.js?{VERHASH}"></script>
<script type="text/javascript">
function toggleDisplay(ddid) {
var replycount = $(ddid).getElementsByTagName('li').length;
if ($(ddid).style.display == 'none' && replycount > 0 ) {
$(ddid).style.display = '';
}
else {
$(ddid).style.display = 'none';
}
var doid = ddid.split('_')[1];
Cookies.set('doid_' + doid, $(ddid).style.display);
setReplyToggleText(ddid);
}
function setReplyToggleText(ddid) {
var replycount = $(ddid).getElementsByTagName('li').length;
$('replytoggle_' + ddid).innerhtml = (($(ddid).style.display == '') ? '{lang pack_up}' : '{lang open}') + '{lang reply}(' + replycount + ')';
}
function refreshReplyToggleText() {
var eas = document.getElementsByClassName("replytoggle");
for (var i = 0; i < eas.length; i++) {
var ea = eas[i];
var ddid = ea.id.substr(12);
var doid = ddid.split('_')[1];
var eadisplay = Cookies.get('doid_' + doid);
if (eadisplay == 'none') {
$(ddid).style.display = 'none';
}
setReplyToggleText(ddid);
}
}
refreshReplyToggleText();
</script>

复制代码

４）当用户添加回复时我们需要更新回复数，所以在模版文件 template/default/home/space_doing_li.htm 里的末尾添加

<script reload="1" type="text/javascript">
setReplyToggleText('{$_GET[key]}_{$_GET[doid]}');
</script>

复制代码

最后是效果图：

这是展开的效果

然后这是收拢的效果

注：本文中的代码里的＜符号后和a相连时加了一个不应该有的空格，以避免Discuz在保存日志时自动改变日志内容。

		自动登录	找回密码
密码			立即注册

给微博添加伸缩功能-Discuz教程下载

给微博添加伸缩功能

相关帖子

全部评论 0

最佳新人

管理/版主

土豪装逼

教程 / CSS+DIV素材

【原创】discuz论坛分类信息中，帖子发布页有多个图片上传功能，74人阅读

【原创】修改discuz门户文章发布时间，将默认时间yyyy-mm-dd修改76人阅读

【实测】Discuz修改论坛列表页排序，实现主题帖子按最新发表时间137人阅读

Discuz! X3.2 - X3.4 升级至 Discuz! X3.5 详细教程178人阅读

【原创】根据论坛发帖时间或门户文章发布时间，判断时间是否为当154人阅读

【原创】分享一款html5+css3的浮窗多图DIY模块（百分百有效）88人阅读

【原创】分享一款html5+css3的浮窗单图DIY模块（百分百有效）100人阅读

【原创】分享一款html5+css3的横排导航列表DIY模块（百分百有效173人阅读

【原创】分享一款html5+css3的四排图文资讯列表DIY模块（百分百307人阅读

【转载】垂直时光轴HTML单页+CSS+js模块983人阅读

所属版块