以WordPress為例講解jQuery美化頁(yè)面Title的方法

更新時(shí)間：2016年05月23日 15:18:14 作者：Kayo Lee

鼠標(biāo)移動(dòng)到超鏈接時(shí)顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁(yè)面Title的方法,需要的朋友可以參考下

這里選取的例子，便是 WordPress 中比較有名的美化超鏈接Title效果，一般的 title 效果是把鼠標(biāo)放到 a 元素中便會(huì)顯示一個(gè)黃底色框，而且是延時(shí)顯示，這樣顯然不是一個(gè)好的 UE ，所以美化的 Title 便誕生了，在本站現(xiàn)在的主題 Line 的側(cè)邊欄中把鼠標(biāo)放到文章標(biāo)題便顯示文章摘要的功能便是使用美化 Title 的原理做的，之所以選取這個(gè)例子，一是該例子中很好的體現(xiàn)了 jQuery 中的 DOM 操作，二是美化 Title 在 WordPress 中比較常用，可以供需要做美化 Title 的人理解其中的原理。同時(shí)因?yàn)橹皩?duì) DOM 和美化 Title 有所研究，因此這篇筆記的內(nèi)容將會(huì)敘述得更加豐富！

美化 Title 的效果很簡(jiǎn)單，需要的是鼠標(biāo)移動(dòng)到超鏈接的那一刻就出現(xiàn) Title 提示，當(dāng)然也可以適當(dāng)添加一些css作美化之用，以配合自己的主題。

首先寫(xiě)一段 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>

接著我們需要完成兩件事，一是當(dāng)鼠標(biāo)滑入超鏈接時(shí)創(chuàng)建一個(gè)內(nèi)容為 title 內(nèi)容的 div ，而是當(dāng)鼠標(biāo)滑出超鏈接時(shí)移除該 div 。

這時(shí)顯然需要用到 mouse 方法，在這里選用 mouseover 與 mouseout ，或是 mouseenter 與 mouseleave 。說(shuō)到這里小插一段，科普推廣一下上面兩組方法的區(qū)別：

上面兩組方法的功能均是當(dāng)鼠標(biāo)懸停在某網(wǎng)頁(yè)元素上時(shí)觸發(fā)事件，不同的是， mouseover 與 mouseout 會(huì)同時(shí)綁定到該元素的子元素上，因此如果一個(gè)網(wǎng)頁(yè)元素內(nèi)有多個(gè)子元素時(shí)很有可能會(huì)發(fā)生在元素上一移動(dòng)鼠標(biāo)就會(huì)觸發(fā)事件的情況。于是從 jQuery 1.3 開(kāi)始便增加了兩個(gè)新的 mouse 方法—— mouseenter 與 mouseleave ，使用 mouseenter 與 mouseleave 并不影響子元素。因?yàn)樵谏厦娴睦又?，選取的網(wǎng)頁(yè)元素是 a 標(biāo)簽，一般不會(huì)有子元素，所以用上面兩組方法均可。

回到我們需要完成的第一步——?jiǎng)?chuàng)建 div 。把內(nèi)容追加到文檔中可以使用 append() ，追加的內(nèi)容為超鏈接的 title ，可以直接獲取 title 屬性值，為了使追加的 div 顯示在該超鏈接旁邊，還可以使用 css() ，當(dāng)然在這之前要先設(shè)置插入的 div 的 css —— position: absolute; 而第二步從文檔中移除元素可以使用 remove() 方法。具體的代碼如下：

$(function(){
  //為提示框預(yù)設(shè)一定的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();
  });
})

這時(shí)美化 Title 的效果基本已經(jīng)完成了，只要使用 mousemove() 方法使美化的 Title 跟著鼠標(biāo)移動(dòng)，同時(shí)可以加一段小代碼使美化 Title 中顯示超鏈接的 URL ，這個(gè)可以根據(jù)個(gè)人喜好加進(jìn)去，本人個(gè)人對(duì)這個(gè)效果無(wú)愛(ài)了，喜歡的童鞋可以使用下面的完整代碼！

$(function(){
  var x = 15;
  var y = 15;
  //為提示框預(yù)設(shè)一定的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 ，各位童鞋可以根據(jù)自己的主題修改！

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; }

相信各位童鞋看了上面的原理和代碼應(yīng)該也猜到我的側(cè)邊欄里的摘要提示是怎么做的了！就是在超鏈接的 title 中添加內(nèi)容截?cái)嗔?，這里跟大家分享我的截?cái)啻a，有興趣的果斷折騰吧！

復(fù)制代碼代碼如下:

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

好了，我們?cè)賮?lái)更加完整地總結(jié)一下實(shí)現(xiàn)title提示的核心代碼：

/*
調(diào)用示例：
$(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");
      });
    }
  });
};

您可能感興趣的文章: