Basic format for jquery Plug-ins:
Copy Code code as follows:
(function ($) {
$.fn.tab = function (options) {//$.fn tab is the name of the plug-in. You can make changes in your own favor.
var defaults = {
Related property settings
}
var options = $.extend (defaults, options);
This.each (function () {
Implementation of the function settings});
};
}) (JQuery);
I'm here to do a tab plugin and I'm going to refine the code above
Copy Code code as follows:
(function ($) {
$.fn.tab = function (options) {
var defaults = {
EventName: "Click",//Trigger event, click for click, MouseMove move for Mouse
Titlekeyid: "Tabtitle",//Toggle ID
SEDCSS: "sed",//CSS When selected
NOSEDCSS: "nosed"//When not selected CSS
}
var options = $.extend (defaults, options);
This.each (function () {
var tab=$ (this);
Binding events
$ (tab). Find ("Li"). Bind (Options.eventname,function () {
$ ("#" +options.titlekeyid). Find ("Li"). attr ("Class", options.nosedcss);
$ (this). attr ("Class", options.sedcss);
$ ("#" +options.titlekeyid+ "info"). Find ("div"). CSS ("display", "none");
$ ("#" +$ (This). attr ("id") + "info"). CSS ("Display", "block");
The individual JS ability is still limited, feel the code write bad
});
});
};
}) (JQuery);
I think we've all used some jquery plug-ins, and here I look at the code when the plug-in is used:
(Code two)
Copy Code code as follows:
<script type= "Text/javascript" >
$ (). Ready (function () {
$ ("#tabtitle"). Tab ({eventname: "MouseMove", Sedcss: "sed"});
})
</script>
Combined with the above two pieces of code to explain
Copy Code code as follows:
$ ("#tabtitle") indicates where you want to use, and a little knowledge of jquery's children's shoes knows what it means, not much,
. tab is the name of the function we defined in this plug-in, and the tab in the $.fn.tab in the control (code one).
. tab ({eventname: "MouseMove", Sedcss: "sed"}); The EventName and Sedcss are the property values defined in (code one) var defaults ={}; If we do not need to change the attribute value, then we use the default attribute value, then the plug-in should use
<script type= "Text/javascript" >
$ (). Ready (function () {
$ ("#tabtitle"). tab ();
})
</script>
Finally, attach all the page code:
Copy Code code as follows:
<title>tab test</title>
<script type= "Text/javascript" src= "Jquery.js" >
</script>
<script type= "Text/javascript" src= "Jquery.joyleetab.js" >
</script>
<script type= "Text/javascript" >
$ (). Ready (function () {
$ ("#tabtitle"). Tab ({eventname: "MouseMove", Sedcss: "sed"});
})
</script>
<link href= "Css.css" rel= "stylesheet" type= "Text/css" >
<body>
<ul id= "Tabtitle" >//ID here corresponds to the ID of the Id,li in $ ("#tabtitle"), which is the tail-added number, respectively.
<li id= "tabtitle1" class= "sed" >asdfasfd</li>
<li id= "Tabtitle2" >asdfasfd</li>
<li id= "Tabtitle3" >asdfasfd</li>
<li id= "Tabtitle4" >asdfasfd</li>
<li id= "Tabtitle5" >asdfasfd</li>
</ul>
<div id= "Tabtitleinfo" >//here the ID of the UL in the Id,id is the tail add number and "info"
<div id= "Tabtitle1info" >000000</div>
<div id= "Tabtitle2info" style= "Display:none" >111111</div>
<div id= "Tabtitle3info" style= "Display:none" >22222</div>
<div id= "Tabtitle4info" style= "Display:none" >33333</div>
<div id= "Tabtitle5info" style= "Display:none" >44444</div>
</div>
</body>
This article focuses on the production method of jquery plug-ins, examples in the code and to optimize the place, please forgive me
SOURCE Package Download
