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

登录/ 注册
站长工具
搜索
广告
大象广告联盟AD 大象广告联盟AD

给微博添加伸缩功能

来自版块: 建站教程 发表于: 2017-1-16 06:54:30
33819
如本资源下载地址失效,请点击此处进行反馈
按照网友夙興夜寐罔徒勞的建议探讨下如何给记录／微博添加一个类似百度贴吧里的功能：展开和收起回复。

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

这是个客户端的改动。分下面几步：
１） 为了能在记录网页重新显示时（如删除回复时）保持用户的展开收起选择，我们要将用户的选择存放在浏览器的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 里添加展开回复／收起回复链接：在下面这句代码
  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>
复制代码
３）在同一文件的末尾这句
  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.     }

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

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

  35.     refreshReplyToggleText();
  36. </script>
复制代码
４）当用户添加回复时我们需要更新回复数，所以在模版文件 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}-->
复制代码
最后是效果图：

这是展开的效果
183628ya4ddf611o515urr.jpg
然后这是收拢的效果
183628cet5kk081h2e85e2.jpg

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

举报

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块
广告
大象广告联盟AD 大象广告联盟AD

©2015-2022 tuyuanma.com 版权所有 Sitemap.xml

站长邮箱：tuyuanma@qq.com 友链、广告、合作联系QQ：3197813386

本站大量内容为原创，少部分转自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

返回顶部