【备忘】JQuery纯前台实现多说回复可见

  注:Z-Blog ASP 可以使用 回复可见(http://app.zblogcn.com/?id=493) 插件,支持多说和自带评论,并且是真正的隐藏。链接内附演示地址。


  多说等社会化评论插件的方便不必多说,非论坛程序对回复可见功能的需求也是不在少数。

  然后所谓纯前台的意思是隐藏掉的东西查看网页源码的话其实是可以看到的。所以略蛋疼。本文只是提供一种选择,而且重点是如何判断当前访客是否登陆多说及是否在本站发表过评论,因为多说不提供诸如 if (ds-当前访客已登陆多说){……}、if (ds-当前访客已评论此文){……}之类的JavaScript接口。。

  大体思路,设元素ID为Hide:

  1、需要引入JQuery(略);

  2、将#Hide隐藏,放在$(function() {……})让其尽可能早的执行,或者用CSS设置;

  3、自定义一个函数,传递参数为CSS选择器;

  4、判断用户是否评论过即判断$('.ds-comments').html()、$(".ds-visitor .ds-visitor-name").html()两个值的包含关系,前者为评论列表,后者为当前登陆者的用户名,可按需写入Cookie(注①)。另读取这两个值时应该尽可能确保多说评论框已经加载完毕,所以使用了window.onload = function(){……}(注②);

  5、如果用户没有评论过:备份#Hide内容后替换为提示语→如果用户已经登陆则给多说评论框的提交按钮绑定点击事件(注③)→点击提交时触发后续操作→设置Cookie→延迟0.5秒等待提交完成→还原#Hide内容→调用函数自身再次执行4、5步的判断;

  6、显示#Hide,只是会根据4、5步的执行结果而显示不同内容;

  7、函数要自动执行一次。

  注:

  ①、SetCookie()和GetCookie()为z-blog自带的Cookie存取函数,其他程序无法直接调用。

  ②、也可以按需要放在$(function() {……})中的用户事件中,然后将“自调用”语句改成相应触发命令,只要确保第一次调用时页面的加载程度。

  ③、需要在多说设置中禁止未登陆用户评论

  CODE:

$(function() {
    $('#Hide').hide();
});
window.onload = function(){
    var srtName = GetCookie("inpName");
    //不使用Cookie时可改为 var srtName = $(".ds-visitor .ds-visitor-name").html(),则仅判断是否在当前页面评论过
    var TempHide = "";
    function ShowHide(e){
        if (!srtName||$('.ds-comments').html().indexOf(srtName)==-1){
            if (TempHide == ""){
                TempHide = $(e).html();
            };
            $(e).html('<p>  此处内容不予显示,如有疑问请<a href="javascript:void(0)" id="ds-login" title="评论本文">回复</a></p>');
            $(document).delegate('#ds-login', 'click', function() {
                $("html,body").animate({scrollTop: $('.ds-textarea-wrapper textarea').offset().top-200}, 500);
                $('.ds-textarea-wrapper textarea').focus();
            });//直接使用#respond定位感觉不太科学
            if ($(".ds-visitor .ds-visitor-name").html()){
                $('.ds-post-button').click(function(){
                        srtName = $(".ds-visitor .ds-visitor-name").html();
                        SetCookie("inpName",srtName,365);//不使用Cookie请去掉本行
                        t = setTimeout(function() {
                            $(e).html(TempHide);
                            $("html,body").animate({scrollTop: $(e).offset().top-200}, 500);//滚动页面到$(e)的位置
                            ShowHide(e);//自调用
                        },500)
                });
            };
        };
        $(e).show();
    };
    ShowHide('#Hide');
}

原文链接:http://www.wdssmq.com/post/20140425674.html

分享本文:新浪微博腾讯微博

神来一句:

  • [贱人就是矫情]
  • [人艰不拆]
  • [朕知道了]
  • [不明觉厉]
  • [这真是极好的]
  • [也真是醉了]
  • [点个赞]
  • [你那么萌你家人造吗?]
  • [涨姿势!]
赞助一下
Baidu Button BEGIN
分享