Customize a jquery plug-in [when the mouse hovers, a description label appears]_jquery

I have been learning jquery recently. After watching it for a few days, I decided to make a small thing to practice my skills. You can check it out for entry-level ones.

Let’s first look at the functions of this little thing below. It’s useful if you have a model.

Function: When your mouse hovers over your html element, it will display a help descriptive label.

Rendering:

Original:

　　

When your mouse is hovering over 'Click Me 1':

　　

When your mouse is hovering over 'textbox':

　　

After looking at the renderings, if you are interested, take a closer look at the code. The code has comments

html code:

Copy code The code is as follows:

<%@ Page Language ="C#" AutoEventWireup="true" CodeFile="testLinkJquery.aspx.cs" Inherits="testLinkJquery" %>










sClick me 1

html code description:
The underlined ones are the parameters passed in when calling the jquery plug-in.
The ones in red are the places you should pay attention to matching
Parameter description:
shelpText: "default help text", //The document where you want to display the label
bgcolor: "red", //label's background color
ftcolor: "yellow", //label's foreground color
width: "200px", //label's width
tempLeft: "15", //label relative to the mouse The left value of the position
tempTop: "15" //The top value of the label relative to the position of the mouse
jquery code[a1.query]

Copy Code The code is as follows:

/*
* HelpTextFn
* Copyright (c) 2011 yongbin zhang http://www.cnblogs.com/2814/
* Date: 2011-6-27
* When you hover the mouse over your html element, it will display a help descriptive label
*/
//The following code cannot be changed
//Comments are code descriptions
/*
If you want to define a jquery plug-in yourself, the general framework is:
(function ($) {
$.fn.HelpTextFn = function (options) { //What needs to be changed is HelpTextFn, this It is the name of your jquery function [you must use this name when you want to call this function in your html],
//No other changes are needed.
var defaults = { // var defaults{This is the default value of the parameter of your function}
helpText: "default help text", //You want to display the document of label
bgcolor: "red", //The background color of label
ftcolor: "yellow", //label's foreground color
width: "200px", //label's width
tempLeft: "15", //label's left value relative to the mouse position
tempTop: "15" //The top value of the label relative to the mouse position
}
var options = $.extend(defaults, options); //This sentence is dead, it means Say, if you call this plug-in in HTML, if there is no value for the parameter passed in,
//Then I will use the parameter defined in defalut, otherwise I will use the value of the parameter you passed in, [ Note]: If you want to use parameters below,
//You have to use [options.parameter name] such as: options.helpText
$(this).mousemove(function (e) { //Add this mousemove event, that is, which html element calls my plug-in, then I will add mousemove event to it
});
$(this).mouseleave(function () { //Add this mouseleave Event, that is, which html element calls my plug-in, then I will add the mouseleave event to it
});
};
})(jQuery); //This sentence is fixed
*/
(function ($) {
$.fn.HelpTextFn = function (options) {//
var defaults = {
helpText: "default help text",
bgcolor: "red",
ftcolor: "yellow",
width: "200px",
tempLeft: "15",
tempTop: "15"
}
var options = $.extend(defaults, options);
var linkDivId = $(this).attr("id");
$(this).mousemove(function (e) {
if ($ ("#linkDiv" linkDivId)) {
$("#linkDiv" linkDivId).remove();
}
var xx = e.originalEvent.x || e.originalEvent.layerX || 0 ;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
var left = xx parseInt(options.tempLeft);
var top = yy parseInt(options.tempTop) ;
$("#" linkDivId).after("

" options.helpText "

");
$ ("#linkDiv" linkDivId).show();
});
$(this).mouseleave(function () {
$("#linkDiv" linkDivId).remove();
});
};
})(jQuery);