Create a prompt box plug-in using jquery plug-in to implement code _ jquery-js tutorial

Today we will introduce the tooltip creation of the prompt box plug-in. We will also introduce the development of the custom selector plug-in. We will first introduce the development of the custom selector. Its code structure is as follows:

The Code is as follows:

(Function ($ ){
$. Expr [':']. customselector = function (object, index, properties, list ){
// Code
};
}) (JQuery );

Method of calling:
$ (A: customselector) Now let's explain the parameters used in the function.
Object: reference of the current dom element, rather than the jquery object. One thing to emphasize is that dom elements and jquery objects are completely different. Tag a represents dom elements, and $ ('A') represents jquery objects, it is a js object. I am not clear about google.
Index: An array index with a subscript of 0.
Properties: an array of selector metadata.
List: dom element array.
Among these parameters, the first parameter is required, and the other parameters are optional.
The selector function determines whether to include the current element through the bool value. true contains, and false does not.
Here we implement a selector for the tag and select only the tag pointing to the external link. The Code is as follows:

The Code is as follows:

(Function ($ ){
$. Expr [':']. external = function (object ){
If ($ (object). is ('A ')){
Return object. hostname! = Location. hostname;
}
};
}) (JQuery );

Now we start to develop the prompt box plug-in. We will not talk about it much in the development process, mainly in code implementation, which contains remarks.

The Code is as follows:

(Function ($) {// update coordinates
$. Fn. updatePosition = function (event ){
Return this. each (function (){
Certificate (this).css ({
Left: event. pageX + 20,
Top: event. pageY + 5
});
});
}
// The prompt box plug-in will display the content of the tag title attribute
$. Fn. tooltip = function (){
Return this. each (function (){
// Obtain the current object
Var self = $ (this );
// Obtain the title Attribute Value
Var title = self. attr ('title ');
// Determine whether the current object is a tag and whether the title attribute contains content
If (self. is ('A') & title! = ''){
Self. removeAttr ('title ')
. Hover (function (event ){
// Move the cursor over the target object
$ ('

'). AppendTo ('body ')
. Text (title)
. Hide ()
. UpdatePosition (event)
. FadeIn (400 );
}, Function (){
// Move the mouse out
$ ('# Tooltip'). remove ();
}). Mousemove (function (event ){
// Move the mouse
$ ('# Tooltip'). updatePosition (event );
});
}
});
};
}) (JQuery );

Hope this article will be useful to you. If you want to see the complete effect, you can go to the demo: jQuery. plugin. tooltip