Http://www.jb51.net/article/31082.htm
The series of articles I read <jquery Plugin development Beginner's guide> after the summary, interested friends can go to read the original book definition plugin structure skeleton:
The structure skeleton used in the book is as follows:
Copy CodeThe code is as follows:
Jquery.fn.fluginmane=function () {
Return This.each (function () {
Code ...
})
}
This structure is not ideal, as mentioned in the special book, to prevent conflict cases from using $, instead of using jquery. Here, we use anonymous functions to implement the structure skeleton of the plug-in, which prevents possible conflicts. We also hope that we can get a good understanding of the anonymous function related knowledge.
Copy CodeThe code is as follows:
(function ($) {
$.fn.fluginname=function () {
Return This.each (function () {
Code ...
});
}
}) (JQuery);
Note the point:
1. For the sake of unification and specification, our plug-in files will be named in the form of Jquery.fluginname.js (Fluginname represents the name of your plugin).
2. The functions we use need to be private and not externally accessible, which ensures that the plug-ins are unaffected by external influences and disturbances (this is guaranteed by the anonymous function).
3. Allows the user to use the options control plugin behavior.
4. The default options allow for external access so that users can customize with minimal code.
5.this.each () iterates through all the objects that meet the requirements, he is a jquery object, and the plug-in finally returns the object. In fact, in this way, the implementation of the JavaScript chain mode.
Our first plugin: Txthover
1. Code implementation:
Copy CodeThe code is as follows:
(function ($) {
$.fn.txthover=function () {
Return This.each (function () {
$ (this). Text (' Text changed! ');
});
}
}) (JQuery);
2. How to use:
Create an HTML file, add a reference to jquery and a plugin, and the code is as follows:
Copy CodeThe code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script type= "Text/javascript" src= "Scripts/jquery-1.4.1.min.js" ></script>
<script type= "Text/javascript" src= "Scripts/jquery.txthover.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' #test '). Txthover ();
});
</script>
<body>
<div id= "Test" >
This is test.</div>
</body>
To add the hover event:
Copy CodeThe code is as follows:
(function ($) {
$.fn.txthover = function () {
Return This.each (function () {
var temp = $ (this). text ();
$ (this). Hover (function () {
$ (this). Text (' Text changed! ');
}, function () {
$ (this). Text (temp);
});
});
}
}) (JQuery);
In the first version, when the page is loaded, the contents of the Div are modified so that the design is not very useful. What we're most used to is when the mouse moves to the top of the text to make some changes. The improved plugin adds the hover event. First we keep the original value of the div in the variable temp, and when the mouse moves over the Div, the text is replaced, the mouse is moved out, the text is replaced.
Add Custom Options
To make it easier for users to use more flexibly, we need to add custom features, plug-in code modifications:
Copy CodeThe code is as follows:
(function ($) {
$.fn.txthover = function (options) {
var defaults = {txt: ' text changed! '};
var opt = $.extend (defaults, options);
Return This.each (function () {
var = $ (this);
var temp = Self.text ();
Self.hover (function () {
Self.text (Opt.txt);
}, function () {
Self.text (temp);
});
});
}
}) (JQuery);
The plugin defines a variable defaults, which sets the default text message. We use $.extend () (a friend who does not know this function can go to the data) method to expand a new variable opt, if the user incoming options variable contains txt, then opt to use the user incoming, or use the system default. We have defined var self = $ (this) in the system in place of the This object. This is a very annoying object in JavaScript, and the objects represented in different function contexts will be different, and passing this to an additional variable will prevent the program from having some errors. It is necessary for unfamiliar friends to master this knowledge point.
When the user calls the plugin on the HTML page, it is possible to customize the text content of the mouse cursor over the div.
$ (document). Ready (function () {
$ (' #test '). Txthover ({txt: ' Test '});
}); Well, today's example ends here.
jquery Plugin Making tutorial Txthover (reprint)
