Compile your own jQuery Tip plug-in _ jquery

This article mainly introduces how to compile the jQuery Tip plug-in. if you need a friend, you can refer to the following: I believe many of my colleagues believe that jQuery is just like me, it's strange that jQuery is too popular, and various plug-ins can basically meet the requirements of ordinary times. But after all, this is not a long term. The Ancients said: "It is better to teach fish to fish ".

For the convenience of those who have not been involved, let's review the jQuery plug-in mechanism.

The code is as follows:

// Add check and uncheck plug-ins
JQuery. fn. extend ({
Check: function (){
Return this. each (function () {this. checked = true ;});
},
Uncheck: function (){
Return this. each (function () {this. checked = false ;});
}
});
// Use of plug-ins
$ ("Input [type = checkbox]"). check ();
$ ("Input [type = radio]"). uncheck ();

In fact, the jQuery plug-in is very simple. no wonder the jQuery plug-in is full of Sky. I thought it was complicated before. I always thought that writing plug-ins was a very advanced task. I don't know if I have the same feeling.

First, let's analyze the demand. (ps: My brother was born from software engineering. I'm sorry, I'm sorry for the tuition ).

What is actually not well analyzed is to make the following results:

When I put the mouse on it, I swept it out. it was too hot. the boss asked me to put one on the website. so my brother wrote a plug-in to satisfy him. sending a salary is God and working for money, don't talk to me about the exercises. it otaku's three views are all ruined and the exercises are useless. Far away. See.

Other jQuery methods are similar:

The code is as follows:

$ (Function (){
Var t = $ (". weixin"). Tip ({
Title: 'scan ',
Content :'',
Html: true,
Direction: 'bottom'
});
T. bind ({
Mouseover: function (){
T. Tip ("show ");
},
Mouseout: function (){
T. Tip ("hide ");
}
});
});

Let's take a look at the configurable options.

The code is as follows:

DefaultOptions :{
Title: '', // title
Content: '', // content
Direction: 'bottom ', // The reverse of the pop-up, relative to the selected element
Html: false, // whether html elements are allowed
Template :'

'// Dialog box
}

At last, I would like to check if I am interested in HD codeph source code. if I am not interested, ctrl + c, ctrl + v.

The code is as follows:

! Function ($ ){
Var Tip = function (element, options ){
This. init (element, options );
}
Tip. prototype = {
Constructor: Tip,
Init: function (element, options ){
This. element = $ (element );
This. options = $. extend ({}, this. defaultOptions, options );
},
Show: function (){
If (! This. tip ){
This. tip = this. getTip ();
Var title = this. tip. find ("h3 "),
Container = this. tip. find (". tip-container ");
// Set the title
Title. text (this. options. title );
// Set content
If (this.options.html ){
Container.html (this. options. content );
} Else {
Container. text (this. options. content );
}
// Add the tip to the body
$ ("Body"). append (this. tip );
// Calculate the tip position
Var eLeft = this. element. offset (). left,
ETop = this. element. offset (). top,
EWidth = this. element. innerWidth (),
EHeight = this. element. innerHeight (),
Tipw = this. tip [0]. offsetWidth,
Tiph = this. tip [0]. offsetHeight,
Top,
Left;
Switch (this. options. direction ){
Case 'top ':
Top = eTop-tiph;
Left = (eLeft-tipw/2) + eWidth/2;
This.tip.css ({top: top, left: left });
Break;
Case 'left ':
Top = (eTop-tiph/2) + eHeight/2;
Left = eLeft-tipw;
This.tip.css ({top: top, left: left });
Break;
Case 'bottom ':
Top = eTop + eHeight;
Left = (eLeft-tipw/2) + eWidth/2;
This.tip.css ({top: top, left: left });
Break;
Case 'right ':
Top = (eTop-tiph/2) + eHeight/2;
Left = eLeft + eWidth;
This.tip.css ({top: top, left: left });
Break;
Default:
Break;
}
} Else {
This.tip.css ({display: 'block '});
}
},
Hide: function (){
This.getTip().css ({display: "none "});
},
GetTip: function (){
Return this. tip? This. tip: $ (this. options. template );
},
Detach: function (){
},
DefaultOptions :{
Title :'',
Content :'',
Direction: 'bottom ',
Html: false,
Template :'

'
}
}
$. Fn. Tip = function (option ){
Return this. each (function (){
Var e = $ (this ),
Data = e. data ('tip '),
Options = typeof option = "object" & option;
If (! Data) e. data ("tip", new Tip (this, options ));
If (typeof option = 'string') data [option] ();
});
}
} (Window. jQuery );

Css style

The code is as follows:

. Tip {
Position: absolute;
Padding: 3px;
Background: # efefef;
Border-radius: 2px;
Top: 0px;
Left: 0px;
}
. Tip. tip-inner {
Background: # fafafb;
Border: 1px solid # d8d8d8;
}
. Tip. tip-inner h3 {
Font-size: 14px;
Padding: 5px;
Border-bottom: 1px solid # eee;
}
. Tip. tip-inner. tip-container {
Padding: 5px;
}

The above is all the content of this article. do you have a new understanding of how to compile the jQuery plug-in? I hope you will like this article.