Take WordPress As an example to explain jquery to beautify the page title method _jquery

Here selected examples, is the WordPress more famous landscaping hyperlink title effect, the general title effect is to put the mouse into a element will display a yellow background box, but also is the delay display, so obviously not a good UE, so the title of beautification was born, In this site now the theme line sidebar in the side of the mouse to the title of the article will show the function is to use the principle of landscaping title to do, the reason for this example is that this example is a good embodiment of the DOM operation in JQuery, and the second is to beautify the Title in WordPress More commonly used, you can do to beautify the Title of the people understand the principle. Also because of previous research on DOM and landscaping Title, the contents of this note will be more informative!

Beautify the title effect is very simple, need is the mouse to move to the hyperlink at the moment the title hint, of course, you can also appropriately add some CSS for landscaping to match their theme.

First write a section of Html as a demo

<div id= "Newtitle" >
   
 

Then we need to do two things, one is to create a div with the title content when the mouse is over the hyperlink, but to remove the div when the mouse hovers over the link.

At this time obviously need to use the mouse method, where to choose MouseOver and mouseout, or MouseEnter and MouseLeave. When it comes to small inserts, popular science promotes the difference between the above two sets of methods:

The function of the above two sets of methods is to trigger an event when the mouse hovers over a page element. The difference is that mouseover and mouseout are bound to the child elements of the element at the same time, so if there is more than one child element in a page element, it is likely that the event will occur when a mouse is moved on the element. As a result, two new mouse methods--mouseenter and MouseLeave were added from JQuery 1.3, and the use of MouseEnter and MouseLeave did not affect child elements. Because in the above example, the selected page element is a label, there is no child element, so use the above two sets of methods are available.

Back to the first step we need to complete-create Div. Append content to the document you can use append (), appended to the title of the hyperlink, you can get the Title property value directly, in order to make the appended div appear next to the hyperlink, you can also use CSS (), of course, before this to set the inserted div Css--po Sition:absolute; The Remove () method is used in the second step to remove elements from the document. The specific code is as follows:

$ (function () {
  //) preset a certain top and left values for the prompt box to prevent the prompt box from being too close to the hyperlink
  var x =;
  var y =;
  $ ("#newtitle a"). MouseEnter (function (e) {
      //record title so that the value of title can be retrieved after the title is emptied
      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 ();
  });

At this time to beautify the title of the effect has been basically completed, as long as the use of MouseMove () method to beautify the title following the mouse movement, while you can add a small code to beautify the title display hyperlink URL, this can be added in accordance with personal preferences, I personally have no love for this effect, Like the children's shoes can use the full code below!

 $ (function () {var x = 15;
  var y = 15;
      Preset top and left values for the prompt box so that the prompt box is too close to the hyperlink $ ("#newtitle a"). MouseEnter (function (e) {//record title so that you can retrieve title after emptying title below
      This.mytitle = This.title;
      This.myhref = This.href;
      This.myhref = (This.myHref.length > 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.page
  X+X) + "px"});
}); })

The specific effect can also see demo Oh!

Finally attached CSS, children's shoes can be modified according to their own theme!

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; te Xt-align:left; padding:5px; Min-height:1em;
#beatitle span {display:block; color: #FF9900;}

I believe that the children's shoes to see the above principle and code should also guess my sidebar in the summary hint is how to do it! is in the title of the hyperlink to add content truncated, here with you to share my truncation code, interested in decisive toss it!

Copy Code code as follows:

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

OK, let's wrap up the core code that implements the title hint in a more complete way:

/* Call Example: $ (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. A
      TTR (' 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 "," Borde R ": 1px solid #A3C0E8", "-moz-border-radius": "3px", "Border-radius": "3px", "-webkit-borde R-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);
      The 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");
    });
}
  }); };