利用jQuery实现WordPress中@的ID悬浮显示评论内容


Posted in Javascript onDecember 11, 2015

比如: A 留言了, B 用 @ 回复了 A, 所以 B 的回复可能是这样的:

@A
How much money do you have?

就是说, 当鼠标悬停在 @A 上面的时候, 就会将 A 的评论内容显示在一个悬浮区域中.

利用jQuery实现WordPress中@的ID悬浮显示评论内容

实现步骤
在这里我们将以iNove主题为例进行讲解。
1. 将以下代码保存为commenttips.js:

jQuery(document).ready(
 function(){
 var id=/^#comment-/;
 var at=/^@/;
 jQuery('#thecomments li p a').each(
  function() {
  if(jQuery(this).attr('href').match(id)&& jQuery(this).text().match(at)) {
   jQuery(this).addClass('atreply');
  }
  }
 );
 jQuery('.atreply').hover(
  function() {
  jQuery(jQuery(this).attr('href')).clone().hide().insertAfter(jQuery(this).parents('li')).attr('id','').addClass('tip').fadeIn(200);
  }, 
  function() {
  jQuery('.tip').fadeOut(400, function(){jQuery(this).remove();});
  }
 );
 jQuery('.atreply').mousemove(
  function(e) {
  jQuery('.tip').css({left:(e.clientX+18),top:(e.pageY+18)})
  }
 );
 }
)

2. 将 commenttips.js 文件放置到 inove/js 目录.

3. style.css 中追加样式代码如下:

#thecomments .tip {
 background:#FFF;
 border:1px solid #CCC;
 width:605px;
 padding:10px !important;
 padding:10px 10px 0;
 margin-top:0;
 position:absolute;
 z-index:3;
}
#thecomments .tip .act {
 display:none;
}
*+html #thecomments .tip {
 padding:10px 10px 0 !important;
}

4. 在主题中添加代码调用 JavaScript. 打开 templates/end.php, 在 </body> 前面一行添加以下代码:
(如果你有其他插件或者自己已经添加了 jQuery 的库, 那第一行代码可以不必添加.)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/commenttips.js"></script>
5. 好了, 刷新一下有 @ 回复的页面, 等页面加载完, 将鼠标悬停在 @ 回复上, 你会看到效果的.

为什么不能跨页显示?
因为其工作原理是, 当鼠标移动到 @{username} 时在本页找到对应的评论, 并插入到评论列表中, 以绝对位置的方式显示出来. 如果评论不在本页, 找不到对象, 当然就没有后面的处理了.

如何跨页获取评论信息?
如果本页找不到对应的评论, 可以通过评论的 ID, 用 AJAX 将后台查询到的评论信息返回页面. 当鼠标移动到 @ 评论上时, 向用户悬浮显示 'Loading...' 提示框, 如果操作成功将找到的评论插入评论列表的最后面, 并将该评论的内容置换到 'Loading...' 框.
也就是说, 被加载过的评论会一直保留在本页中, 当鼠标再次移动到 @ 评论上不用重新加载.
下面我们来看一下针对跨页评论的处理方法:

在当前页面如何通过 @{username} 找到对应评论?

1. 每个评论都会有一个 ID, 结构如: comment-{commentId}, 这本是为了方便通过锚点找到评论, 同时也成为完成 @ 评论提示的必要条件.
2. 每个 @{username} 其实就是指向评论的锚点, 自然可以取得评论 ID.

所以其实很简单, 如果评论 ID 是 _commentId, 那么在 JS 可以通过以下代码找到对应的评论.

document.getElementById(_commentId);

如果能够找到目标评论, 则创建一个隐藏的临时评论, 并以目标评论作为其内容, 在 @{username} 附件将它显示出来; 如果没找到目标评论, 则通过 ID 到后台查找对应的评论, 进行跨页处理.

如何跨页加载评论?

跨页的实质是动态加载评论, 将获取的评论追加到评论列表最后, 让评论可以在本页中找到, 不同的只是这些评论通过 CSS 加工并不会显示出来.

可以参考下图. 如果评论不在本页, 会走红色路径, 在评论被加入当前页面之后, 会有一个动作, 将提示框的 Loading 信息替换为评论内容. 当用户在此将鼠标悬停在这个 @{username} 时, 评论已在当前页面, 所以不需再次加载, 而是走绿色路径, 直接将评论提示框调出.

利用jQuery实现WordPress中@的ID悬浮显示评论内容

注: 图中蓝色部分是后台处理, 黄色部分是整个加载过程的重点.

在后台中怎样获取评论并对其格式化?

这里可以自己写个方法对评论信息进行格式化, 也可以通过评论的回调方法 (WordPress 2.7 或以上版本可以定义评论的回调方法) 来获取格式化的 HTML.

$comment = get_comment($_GET['id']);
custom_comments($comment, null,null);

注: custom_comments 是我的回调函数的方法名.

JavaScript 代码

基于 jQuery 的 JS 代码, 如果不使用或者使用其他 JS frame, 请根据处理思路自行改造. 建议将代码放置于评论列表下方.

var id=/^#comment-/;
var at=/^@/;
jQuery('#thecomments li p a').each(function() {
 if(jQuery(this).attr('href').match(id)&& jQuery(this).text().match(at)) {
 jQuery(this).addClass('atreply');
 }
});
jQuery('.atreply').hover(function() {
 var target = this;
 var _commentId = jQuery(this).attr('href');
 
 if(jQuery(_commentId).is('.comment')) {
 jQuery('<li class="comment tip"></li>').hide().html(jQuery(_commentId).html()).appendTo(jQuery('#thecomments'));
 jQuery('#thecomments .tip').css({
  left:jQuery().cumulativeOffset(this)[0] + jQuery(this).width() + 10,
  top:jQuery().cumulativeOffset(this)[1] - 22
 }).fadeIn();
 } else {
 var id = _commentId.slice(9);
 jQuery.ajax({
  type:     'GET'
  ,url:     '?action=load_comment&id=' + id
  ,cache:    false
  ,dataType:  'html'
  ,contentType: 'application/json; charset=utf-8'
 
  ,beforeSend: function(){
  jQuery('<li class="comment tip"></li>').hide().html('<p class="ajax-loader msg">Loading...</p>').appendTo(jQuery('#thecomments'));
  jQuery('#thecomments .tip').css({
   left:jQuery().cumulativeOffset(target)[0] + jQuery(target).width() + 10,
   top:jQuery().cumulativeOffset(target)[1] - 22
  }).fadeIn();
  }
 
  ,success: function(data){
  var addedComment = jQuery(data + '</li>');
  addedComment.hide().appendTo(jQuery('#thecomments'));
  jQuery('#thecomments .tip').html(addedComment.html());
  }
 
  ,error: function(){
  jQuery('#thecomments .tip').html('<p class="msg">Oops, failed to load data.</p>');
  }
 });
 }
}, function() {
 jQuery('#thecomments .tip').fadeOut(400, function(){
 jQuery(this).remove();
 });
});

PHP 代码

这段代码来自PhilNa2 主题, 建议将代码追加到 function.php.

function load_comment(){
 if($_GET['action'] =='load_comment' && $_GET['id'] != ''){
 $comment = get_comment($_GET['id']);
 if(!$comment) {
  fail(printf('Whoops! Can\'t find the comment with id %1$s', $_GET['id']));
 }
 
 custom_comments($comment, null,null);
 die();
 }
}
add_action('init', 'load_comment');
Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
jQuery入门之层次选择器实例简析
Dec 11 #Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 #Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 #Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 #Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 #Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 #Javascript
You might like
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
Python使用遗传算法解决最大流问题
2018/01/29 Python
python实现多线程端口扫描
2019/08/31 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
python数据预处理方式 :数据降维
2020/02/24 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
flask框架中的cookie和session使用
2021/01/31 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
通用求职信范文模板分享
2013/12/27 职场文书
社会学专业求职信
2014/02/24 职场文书
股份合作协议书
2014/04/12 职场文书
2014年纠风工作总结
2014/12/08 职场文书
四群教育工作总结
2015/08/10 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
浅析Python中的套接字编程
2021/06/22 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle