Tutorial on Tabs Switching Using jquery plug-in (1/2)

Automatic rotation, ajax and other main functions, followed by dom arrangement. Here we use the traditional
<Div id = "tabs">
<Ul>
<Li> <a href = "# tabs1"> tabs1 </a> </li>
<Li> <a href = "# tabs2" rel = "ajax.htm"> tabs2 </a> </li>
</Ul>
<Div id = "tabs1"> hello world! </Div>
<Div id = "tabs2"> </div>
</Div>

First, write a closure of the jquery plug-in. A friend in the garden wrote the closure concept of webpage special effects over the past two days. It's good. If you are interested, go and have a look.
The www. bKjia. c0m 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 www. bKjia. c0m 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 the function of extend, see <a href = "http://api.jquery.com/jquery.extend/"> http://api.jquery.com/jquery.extend/ </a>.

4. Compile the main function and describe the comments in the code.
The www. bKjia. c0m code is as follows:
Return this. each (function () {// bind each dom plug-in here
Var target = $ (this );
Var div = target. children (). not ("ul, span"); // all tabs display body div
Var tabs = target. find ('ul: eq (0) li '); // all tabs head Indexes
Function tabs (){
If ($ (this). hasclass (opts. classname )){
Return false;
}
Tabsshow (div, $ (this ));
Return false;
}
Function tabsshow (div, li, index ){
Div. stop (true, true). hide ();
// Used for automatic rotation
If (typeof (index) = "number "){
If (li. find ("a"). attr ("rel") ajax (div, li );
$ (Div [index]). stop (true, true). fadein (opts. fadein );
Tabs. stop (true, true). removeclass (opts. classname );
$ (Tabs [index]). stop (true, true). addclass (opts. classname );
} 1 2