广告

兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册
PS教程

给微博添加伸缩功能

[复制链接]
tuyuanma 发表于 2017-1-16 06:54:30 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


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

这是百度贴吧楼内楼效果图:
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在保存日志时自动改变日志内容。

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2018-12-18 22:59
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表