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

给微博添加伸缩功能

开通本站Svip会员,全站资源免费下
按照网友夙興夜寐罔徒勞的建议探讨下如何给记录/微博添加一个类似百度贴吧里的功能:展开和收起回复。

这是百度贴吧楼内楼效果图:
650086f5gw1f4t2xdy812j20jj06cjro.jpg
这是展开的效果
650086f5gw1f4t2xceq24j20if01c744.jpg
然后这是收拢的效果

这是个客户端的改动。分下面几步:
1) 为了能在记录网页重新显示时(如删除回复时)保持用户的展开收起选择,我们要将用户的选择存放在浏览器的cookie里,所以我们要利用一个专门处理cookie的javascript库函数文件 js.cookie.js,在这里 https://raw.githubusercontent.com/js-cookie/js-cookie/v2.1.2/src/js.cookie.js 下载后放入网站的文件夹 static/js 里。
2)在模版文件 template/default/home/space_doing.htm 里添加展开回复/收起回复链接:在下面这句代码
  1. <span class="y"><!--{date($dv['dateline'], 'u')}--></span>
复制代码
前添加
  1. <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>
  2. <span class="y pipe">|</span>
复制代码
3)在同一文件的末尾这句
  1. <!--{template common/footer}-->
复制代码
前添加
  1. <script type="text/javascript" src="{$_G[setting][jspath]}js.cookie.js?{VERHASH}"></script>
  2. <script type="text/javascript">
  3.     function toggleDisplay(ddid) {
  4.         var replycount = $(ddid).getElementsByTAGName('li').length;
  5.         if ($(ddid).style.display == 'none' && replycount > 0 ) {
  6.             $(ddid).style.display = '';
  7.         }
  8.         else {
  9.             $(ddid).style.display = 'none';
  10.         }
  11.         var doid = ddid.split('_')[1];
  12.         Cookies.set('doid_' + doid, $(ddid).style.display);
  13.         setReplyToggleText(ddid);
  14.     }

  15.     function setReplyToggleText(ddid) {
  16.         var replycount = $(ddid).getElementsByTagName('li').length;
  17.         $('replytoggle_' + ddid).innerhtml = (($(ddid).style.display == '') ? '{lang pack_up}' : '{lang open}') + '{lang reply}(' + replycount + ')';
  18.     }

  19.     function refreshReplyToggleText() {
  20.         var eas = document.getElementsByClassName("replytoggle");
  21.         for (var i = 0; i < eas.length; i++) {
  22.             var ea = eas[i];
  23.             var ddid = ea.id.substr(12);
  24.             var doid = ddid.split('_')[1];
  25.             var eadisplay = Cookies.get('doid_' + doid);
  26.             if (eadisplay == 'none') {
  27.                 $(ddid).style.display = 'none';
  28.             }            
  29.             setReplyToggleText(ddid);
  30.         }
  31.     }

  32.     refreshReplyToggleText();
  33. </script>
复制代码
4)当用户添加回复时我们需要更新回复数,所以在模版文件 template/default/home/space_doing_li.htm 里的末尾添加
  1. <!--{if $_GET[doid]}-->
  2. <script reload="1" type="text/javascript">
  3.     setReplyToggleText('{$_GET[key]}_{$_GET[doid]}');
  4. </script>
  5. <!--{/if}-->
复制代码
最后是效果图:

这是展开的效果

然后这是收拢的效果


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

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部