以WordPress为例讲解jQuery美化页面Title的方法

310 阅读 0 评论 205 点赞

我是靠谱客的博主淡然山水，最近开发中收集的这篇文章主要介绍以WordPress为例讲解jQuery美化页面Title的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这里选取的例子，便是 WordPress 中比较有名的美化超链接Title效果，一般的 title 效果是把鼠标放到 a 元素中便会显示一个黄底色框，而且是延时显示，这样显然不是一个好的 UE ，所以美化的 Title 便诞生了，在本站现在的主题 Line 的侧边栏中把鼠标放到文章标题便显示文章摘要的功能便是使用美化 Title 的原理做的，之所以选取这个例子，一是该例子中很好的体现了 jQuery 中的 DOM 操作，二是美化 Title 在 WordPress 中比较常用，可以供需要做美化 Title 的人理解其中的原理。同时因为之前对 DOM 和美化 Title 有所研究，因此这篇笔记的内容将会叙述得更加丰富！

美化 Title 的效果很简单，需要的是鼠标移动到超链接的那一刻就出现 Title 提示，当然也可以适当添加一些css作美化之用，以配合自己的主题。

首先写一段 Html 作为演示

<div id="newtitle">
  <h2>美化Title</h2>
  <ul>
    <li><a href="#" title="这是Title1">Title1</a></li>
    <li><a href="#" title="这是Title2">Title2</a></li>
    <li><a href="#" title="这是Title3">Title3</a></li>
    <li><a href="#" title="这是Title4">Title4</a></li>
    <li><a href="#" title="这是Title5">Title5</a></li>
    <li><a href="#" title="这是Title6">Title6</a></li>
    <li><a href="#" title="这是Title7">Title7</a></li>
    <li><a href="#" title="这是Title8">Title8</a></li>
  </ul>
</div>

接着我们需要完成两件事，一是当鼠标滑入超链接时创建一个内容为 title 内容的 div ，而是当鼠标滑出超链接时移除该 div 。

这时显然需要用到 mouse 方法，在这里选用 mouseover 与 mouseout ，或是 mouseenter 与 mouseleave 。说到这里小插一段，科普推广一下上面两组方法的区别：

上面两组方法的功能均是当鼠标悬停在某网页元素上时触发事件，不同的是， mouseover 与 mouseout 会同时绑定到该元素的子元素上，因此如果一个网页元素内有多个子元素时很有可能会发生在元素上一移动鼠标就会触发事件的情况。于是从 jQuery 1.3 开始便增加了两个新的 mouse 方法—— mouseenter 与 mouseleave ，使用 mouseenter 与 mouseleave 并不影响子元素。因为在上面的例子中，选取的网页元素是 a 标签，一般不会有子元素，所以用上面两组方法均可。

回到我们需要完成的第一步——创建 div 。把内容追加到文档中可以使用 append() ，追加的内容为超链接的 title ，可以直接获取 title 属性值，为了使追加的 div 显示在该超链接旁边，还可以使用 css() ，当然在这之前要先设置插入的 div 的 css —— position: absolute; 而第二步从文档中移除元素可以使用 remove() 方法。具体的代码如下：

$(function(){
  //为提示框预设一定的top和left值，以免提示框与超链接的距离太近
  var x = 15;
  var y = 15;
  $("#newtitle a").mouseenter(function(e){
      //记录title，以便下面清空title后能重新获取title的值
      this.myTitle = this.title; 
      this.title = "";
      var beatitle = "<div id='beatitle'>"+this.myTitle+"</div>";
      $("#newtitle").append(beatitle);
      $("#beatitle")
        .css({
          "opacity":"0.6",
          "top": (e.pageY+y) + "px",
          "left": (e.pageX+x) + "px"
          }).show("fast");
  }).mouseleave(function(){
      this.title = this.myTitle;
      $("#beatitle").remove();
  });
})

这时美化 Title 的效果基本已经完成了，只要使用 mousemove() 方法使美化的 Title 跟着鼠标移动，同时可以加一段小代码使美化 Title 中显示超链接的 URL ，这个可以根据个人喜好加进去，本人个人对这个效果无爱了，喜欢的童鞋可以使用下面的完整代码！

$(function(){
  var x = 15;
  var y = 15;
  //为提示框预设一定的top和left值，以免提示框与超链接的距离太近
  $("#newtitle a").mouseenter(function(e){
      //记录title，以便下面清空title后能重新获取title的值
      this.myTitle = this.title;
      this.myHref = this.href;
      this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
      this.title = "";
      var beatitle = "<div id='beatitle'>"+this.myTitle+"<span>"+this.myHref+"</span>"+"</div>";
      $("#newtitle").append(beatitle);
      $("#beatitle")
        .css({
          "opacity":"0.6",
          "top": (e.pageY+y) + "px",
          "left": (e.pageX+x) + "px"
          }).show("fast");
  }).mouseleave(function(){
      this.title = this.myTitle;
      $("#beatitle").remove();
  }).mousemove(function(e){
      $("#beatitle")
        .css({
          "top": (e.pageY+y)+"px",
          "left": (e.pageX+x)+"px"
        });
  });
})

具体的效果也可以看demo 噢！

最后附上 css ，各位童鞋可以根据自己的主题修改！

body {font-size: 12pt; color: #99CC33; }
h2 {font-size: 14pt; }
ul {list-style: none; padding: 0 0 0 10px;}
ul li {margin-bottom: 5px; }
a {text-decoration: none; color: #99CC33; }
#beatitle {position: absolute; z-index: 1000; max-width: 260px; width: auto !important; width: 220px; background: #000; text-align: left; padding: 5px; min-height: 1em; }
#beatitle span {display: block; color: #FF9900; }

相信各位童鞋看了上面的原理和代码应该也猜到我的侧边栏里的摘要提示是怎么做的了！就是在超链接的 title 中添加内容截断了，这里跟大家分享我的截断代码，有兴趣的果断折腾吧！

复制代码代码如下:

<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 240,'...'); ?>">

好了，我们再来更加完整地总结一下实现title提示的核心代码：

/*
调用示例：
$(document).ready(function(){
$('.quicktip').quberTip({
 speed:200
});
});
<a href='' class='quicktip' title='Information about this link'>desktop publishing</a>
*/
jQuery.fn.quberTip = function (options) {
  var defaults = {
    speed: 500,
    xOffset: 10,
    yOffset: 10
  };
  var options = $.extend(defaults, options);
  return this.each(function () {
    var $this = jQuery(this);
    if ($this.attr('title') != undefined) {
      //Pass the title to a variable and then remove it from DOM
      if ($this.attr('title') != '') {
        var tipTitle = ($this.attr('title'));
      } else {
        var tipTitle = 'QuberTip';
      }
      //Remove title attribute
      $this.removeAttr('title');
      $(this).hover(function (e) {
        //      $(this).css('cursor', 'pointer');
        $("body").append("<div id='tooltip'>" + tipTitle + "</div>");
        $("#tooltip").css({ "position": "absolute",
          "z-index": "9999",
          "background": "#D3DDF5",
          "background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",
          "padding": "5px",
          "opacity": "0.9",
          "border": "1px solid #A3C0E8",
          "-moz-border-radius": "3px",
          "border-radius": "3px",
          "-webkit-border-radius": "3px",
          "font-weight": "normal",
          "font-size": "12px",
          "display": "none"
        });
        $("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
      .css("left", (e.pageX + defaults.yOffset) + "px")
      .fadeIn(options.speed);
      }, function () {
        //Remove the tooltip from the DOM
        $("#tooltip").remove();
      });
      $(this).mousemove(function (e) {
        $("#tooltip")
  .css("top", (e.pageY + defaults.xOffset) + "px")
  .css("left", (e.pageX + defaults.yOffset) + "px");
      });
    }
  });
};