以WordPress为例解说jQuery丑化页面Title的办法

2022-03-07 收藏 0 点赞 0 图文教程

这里选取的例子，便是 WordPress 中比拟有名的丑化超链接Title成果，普通的 title 成果是把鼠标放到 a 元素中便会显示一个黄底色框，而且是延时显示，这样显然不是一个好的 UE ，所以丑化的 Title 便降生了，在本站如今的主题 Line 的侧边栏中把鼠标放到文章题目便显示文章摘要的性能便是应用丑化 Title 的原理做的，之所以选取这个例子，一是该例子中很好的表现了 jQuery 中的 DOM 操作，二是丑化 Title 在 WordPress 中比拟罕用，能够供需求做丑化 Title 的人了解其中的原理。同时由于之前对 DOM 和丑化 Title 有所钻研，因而这篇笔记的内容将会叙说得愈加丰厚！

丑化 Title 的成果很简略，需求的是鼠标挪动到超链接的那一刻就呈现 Title 提醒，当然也能够适当增加一些css作丑化之用，以配合本人的主题。

首先写一段 Html 作为演示

<p 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>
</p>

接着咱们需求实现两件事，一是当鼠标滑入超链接时创立一个内容为 title 内容的 p ，而是当鼠标滑出超链接时移除该 p 。

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

下面两组办法的性能均是当鼠标悬停在某网页元素上时触发事情，不同的是， mouseover 与 mouseout 会同时绑定到该元素的子元素上，因而假如一个网页元素内有多个子元素时很有可能会发作在元素上一挪动鼠标就会触发事情的状况。于是从 jQuery 1.3 开端便添加了两个新的 mouse 办法—— mouseenter 与 mouseleave ，应用 mouseenter 与 mouseleave 并不影响子元素。由于在下面的例子中，选取的网页元素是 a 标签，普通不会有子元素，所以用下面两组办法均可。

回到咱们需求实现的**步——创立 p 。把内容追加到文档中能够应用 append() ，追加的内容为超链接的 title ，能够间接获取 title 属性值，为了使追加的 p 显示在该超链接旁边，还能够应用 css() ，当然在这之前要先设置拔出的 p 的 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 = "<p id='beatitle'>"+this.myTitle+"</p>";
      $("#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 = "<p id='beatitle'>"+this.myTitle+"<span>"+this.myHref+"</span>"+"</p>";
      $("#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("<p id='tooltip'>" + tipTitle + "</p>");
        $("#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");
      });
    }
  });
};

以上就是安达网络工作室关于《以WordPress为例讲解jQuery美化页面Title的方法》的一些看法。更多内容请查看本栏目更多内容！

打赏