To jquery believe that many students and I as usual are copycat, no way, to blame can only blame jquery is too hot, a variety of plug-ins can basically meet the normal requirements. But this is not a long-term way, the ancients said: "To teach the fish, rather than the award of fishing."
To facilitate the lack of contact before the students, first to review the jquery plug-in mechanism bar.
Copy Code code 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, jquery plug-ins are very simple, no wonder that the jquery Plug-ins fly, before I want to complicate, always feel that writing plug-ins is very advanced things, do not know that there is no sympathy with the students.
Before you start to do a bit of demand analysis it (PS: Columbia is learning software engineering birth of the tuition is very pit dad, do not engage in demand analysis can not afford the tuition ah, hehe).
In fact, there is no good analysis is to make the following effect:
When the mouse is put on the pop-up micro-letter sweep, micro-letter too hot, the boss let the site put one, so brother wrote a plug-in to meet him, pay is God, give money to work, don't give me to talk about moral integrity, it otaku are three view to destroy, the integrity of all without. Pulled away. Look at the effect chart.
Using methods other jquery is no different:
Copy Code code as follows:
$ (function () {
var t = $ (". Weixin"). Tip ({
Title: ' Micro-letter sweep ',
Content: ' ',
Html:true,
Direction: ' Bottom '
});
T.bind ({
Mouseover:function () {
T.tip ("show");
},
Mouseout:function () {
T.tip ("Hide");
}
});
});
Look at the configurable options.
Copy Code code as follows:
Defaultoptions: {
Title: ',//Heading
Content: ",//Contents
Direction: ' Bottom ',//pop-up reverse, relative to the selected element
html:false,//whether content is allowed as HTML element
Template: ' <div class= "Tip" ><div class= "Tip-inner" >}
Finally on the HD uncensored source is interested to see, not interested in the Ctrl+c,ctrl+v bar
Copy Code code 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 Title
Title.text (This.options.title);
Set content
if (this.options.html) {
Container.html (this.options.content);
} else {
Container.text (this.options.content);
}
Add tip to Body
$ ("Body"). Append (This.tip);
To calculate the position of the tip
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: ' <div class= "Tip" ><div class= "Tip-inner" >}
}
$.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 Styles
Copy Code code 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 the content of this article, the small partners on how to write jquery Plug-ins have a new understanding of it, I hope you can like this article.
