Step-by-Step jquery plug-in Tabs implementation process _ jquery

It is necessary to make a simple tabs plug-in. Before designing the plug-in, sort out the ideas and implement the main functions such as tabs, automatic rotation, and ajax, and then arrange the dom, the traditional tabs is one of the most widely used Web pages. There are also many jquery plug-ins and non-jquery plug-ins. Some friends asked me how to use jquery. ui. how does tabs ajax request the server only once? I thought it was actually very simple. I knew it by looking at the official API, but I checked the official ui with firebug before replying to these friends. tabs found that ajax cache is declared. When a tabs is clicked, there will still be server requests. This should be the server cache, rather than the ajax request, I no longer requested the server. Next I looked for other tabs plug-ins. Basically, they didn't meet the requirements. They were either too large or too simple. If they were too large, they would be better off using the ui. tabs, documentation, and code specifications are reliable. Therefore, it is necessary to make a simple tabs plug-in. Before designing the plug-in, sort out the ideas and implement main functions such as tabs, automatic rotation, and ajax, then the dom is arranged. Here we use the traditional

　　

　　　　
• Tabs1

　　　　
• Tabs2

　　

　　

Hello World!

　　

A li corresponds to a p method. When ajax is used, a rel attribute of a is added, and the content is written to the corresponding p. Then the rel attribute is removed, so that only one request is sent to the server, next, all the content that p has written.
I didn't use cookies here. I can use jquery. cookie plug-in combination, so that even if the user closes the web page and then opens it again, the server does not need to be requested.
I. First, write a closure of the jquery plug-in. A friend in the garden wrote the javascript closure concept these two days. It's good. If you are interested, go and check it out.

The Code is as follows:

(Function ($ ){
// Code here
}) (JQuery );

2. Plug-in name. The name here is aTabs. In this way, $ (...). aTabs () can be used for binding. My English name is Allen, So I named it with the header ~

The Code is as follows:

$. Fn. aTabs = function (options ){
// Api
// Main function
}

3. Write the desired function as an API for external Modification

The Code is as follows:

$. Fn. aTabs. defaults = {
FirstOn: 0,
ClassName: 'selected ',
EventName: 'all', // click, mouserover, all
LoadName: 'loading... ', // ajax waiting string
FadeIn: 'normal ',
AutoFade: false,
AutoFadeTime: 3
};
Var opts = $. extend ({}, $. fn. aTabs. defaults, options); // Replace the default value of the external input here, $. for more information about how extend works, see http://api.jquery.com/jquery.extend /.

4. Compile the main function and describe the comments in the code.

The Code is as follows:

Return this. each (function () {// bind each dom plug-in here
Var target = $ (this );
Var p = target. children (). not ("ul, span"); // all tabs display bodies p
Var tabs = target. find ('ul: eq (0) li '); // all tabs head Indexes
Function Tabs (){
If ($ (this). hasClass (opts. className )){
Return false;
}
TabsShow (p, $ (this ));
Return false;
}
Function tabsShow (p, li, index ){
P. stop (true, true). hide ();
// Used for automatic rotation
If (typeof (index) = "number "){
If (li. find ("a"). attr ("rel") ajax (p, li );
$ (P [index]). stop (true, true). fadeIn (opts. fadeIn );
Tabs. stop (true, true). removeClass (opts. className );
$ (Tabs [index]). stop (true, true). addClass (opts. className );
}
// Non-automatic rotation
Else {
Var tabBody = p. filter (li. find ("a"). attr ("href "));
If (li. find ("a"). attr ("rel") ajax (p, li );
TabBody. stop (true, true). fadeIn (opts. fadeIn );
Tabs. stop (true, true). removeClass (opts. className );
Li. stop (true, true). addClass (opts. className );
}
}
Function ajax (p, li) {// here is the key ajax. You can request the server only once by operating rel.
Var href = li. find ("a"). attr ("href ");
Var rel = li. find ("a"). attr ("rel"); // ajax request url
Var I = p. filter (href); // The current p
If (rel) {// if the ajax request url is not empty, only ajax once
I .html (opts. loadName );
$. Ajax ({
Url: rel,
Cache: false,
Success: function (html ){
I .html (html );
},
Error: function (){
I .html ('loading error, please try again! ');
}
});
Li. find ("a"). removeAttr ("rel"); // ajax only once
}
}
If (opts. autoFade ){
Var index = opts. firstOn + 1;
SetInterval (function (){
If (index> = p. length ){
Index = 0;
}
TabsShow (p, $ (this), index ++ );
}. Opts. autoFadeTime * 1000 );
}
Tabs. bind (opts. eventName = 'all '? 'Click mouseover': opts. eventName, Tabs) // bind the event
. Filter (': first'). trigger (opts. eventName = 'all '? 'Click': opts. eventName); // automatically triggers an event.
});

Finally, the above integration, the tabs plug-in was born, the following is all the source code:

The Code is as follows:

/*
* Author: Blackstone's rock
*/
(Function ($ ){
$. Fn. aTabs = function (options ){
$. Fn. aTabs. defaults = {
FirstOn: 0,
ClassName: 'selected ',
EventName: 'all', // click, mouserover, all
LoadName: 'loading... ', // ajax waiting string
FadeIn: 'normal ',
AutoFade: false,
AutoFadeTime: 3
};
Var opts = $. extend ({}, $. fn. aTabs. defaults, options );
Return this. each (function (){
Var target = $ (this );
Var p = target. children (). not ("ul, span"); // all tabs display bodies p
Var tabs = target. find ('ul: eq (0) li '); // all tabs head Indexes
Function Tabs (){
If ($ (this). hasClass (opts. className )){
Return false;
}
TabsShow (p, $ (this ));
Return false;
}
Function tabsShow (p, li, index ){
P. stop (true, true). hide ();
// Used for automatic rotation
If (typeof (index) = "number "){
If (li. find ("a"). attr ("rel") ajax (p, li );
$ (P [index]). stop (true, true). fadeIn (opts. fadeIn );
Tabs. stop (true, true). removeClass (opts. className );
$ (Tabs [index]). stop (true, true). addClass (opts. className );
}
// Non-automatic rotation
Else {
Var tabBody = p. filter (li. find ("a"). attr ("href "));
If (li. find ("a"). attr ("rel") ajax (p, li );
TabBody. stop (true, true). fadeIn (opts. fadeIn );
Tabs. stop (true, true). removeClass (opts. className );
Li. stop (true, true). addClass (opts. className );
}
}
Function ajax (p, li ){
Var href = li. find ("a"). attr ("href ");
Var rel = li. find ("a"). attr ("rel"); // ajax request url
Var I = p. filter (href); // The current p
If (rel) {// if the ajax request url is not empty, only ajax once
I .html (opts. loadName );
$. Ajax ({
Url: rel,
Cache: false,
Success: function (html ){
I .html (html );
},
Error: function (){
I .html ('loading error, please try again! ');
}
});
Li. find ("a"). removeAttr ("rel"); // ajax only once
}
}
If (opts. autoFade ){
Var index = opts. firstOn + 1;
SetInterval (function (){
If (index> = p. length ){
Index = 0;
}
TabsShow (p, $ (this), index ++ );
}. Opts. autoFadeTime * 1000 );
}
Tabs. bind (opts. eventName = 'all '? 'Click mouseover': opts. eventName, Tabs) // bind the event
. Filter (': first'). trigger (opts. eventName = 'all '? 'Click': opts. eventName); // automatically triggers an event.
});
};
}) (JQuery );