To define the structure skeleton of a plug-in:
The skeleton of the structure used in the book is as follows:
Copy Code code as follows:
Jquery.fn.fluginmane=function () {
Return This.each (function () {
Code ...
})
}
This structure is not very ideal, the special book mentions, in order to prevent conflict examples do not use the $, and use jquery. Here, we use anonymous functions to implement the structure skeleton of the plug-in, so that we can prevent possible conflicts. Also hope that you have a good understanding of the anonymous function related knowledge.
Copy Code code as follows:
(function ($) {
$.fn.fluginname=function () {
Return This.each (function () {
Code ...
});
}
}) (JQuery);
Note the point:
1. In order to unify and standardize, our plugin file will be named in the form of Jquery.fluginname.js (Fluginname is the name of your plugin).
2. The functions we use need to be private and cannot be accessed externally, which ensures that the plugin is not affected by external influences and disturbances (this is guaranteed by the anonymous function).
3. Allow users to use options to control the behavior of Plug-ins.
4. The default options allow for external access so that users can customize them with minimal code.
5.this.each () iterates through all the objects that meet the requirements, he is a jquery object, and the plugin finally returns the object. In fact, this way to achieve the JavaScript chain mode.
Our first plugin: Txthover
1. Code implementation:
Copy Code code as follows:
(function ($) {
$.fn.txthover=function () {
Return This.each (function () {
$ (this). Text (' Text changed! ');
});
}
}) (JQuery);
2. How to use:
Create an HTML file, add jquery and plug-in references, the code is as follows:
Copy Code code 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>
Add Hover Event:
Copy Code code 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);
The first version, when the page is loaded, the div content is modified, so the design is not much use. What we use most often is that when the mouse moves to the top of the text, some changes occur. The improved plug-in added the hover event. First, we keep the original div value in the variable temp, when the mouse moved to the top of the Div, text is replaced, the mouse moved out, replace the text back.
Add a Custom option
In order to facilitate the user more flexible use, we need to add custom functionality, plug-in code modification:
Copy Code code as follows:
(function ($) {
$.fn.txthover = function (options) {
var defaults = {txt: ' text changed! '};
var opt = $.extend (defaults, options);
Return This.each (function () {
var self = $ (this);
var temp = Self.text ();
Self.hover (function () {
Self.text (Opt.txt);
}, function () {
Self.text (temp);
});
});
}
}) (JQuery);
The plug-in defines a variable defaults and sets the default text information. We use $.extend () (not understand the function of friends can go to the data) method to extend a new variable opt, if the user incoming options variable contains txt, then opt to use the user incoming, otherwise use the system default. We have defined the var self = $ (this) in the system to replace the This object. This is a very annoying object in JavaScript, and the object represented in different function contexts is different, and passing this to an additional variable avoids some errors in the program. It is necessary to have a good grasp of the knowledge of unfamiliar friends.
When a user invokes a plugin on an HTML page, you can customize the mouse to move to the text content of the div above.
$ (document). Ready (function () {
$ (' #test '). Txthover ({txt: ' Test '});
}); Well, here's the example for today.
