JQuery tabins tabBox implementation code

I checked out the official jq plug-in documentation (http://docs.jquery.com/Plugins/Authoring) and A plug-in A developed Pattern written by Mike Alsup recommended in this document. English is not very good, but I still try to see it (he is not happy to learn knowledge and practice English). tabBox is a debut.

As the name suggests, this plug-in is convenient to generate a "box" with the tab function. See the figure to understand

This function is very popular on the webpage, regardless of the front-end.

Here, I first provide three parameters for custom plug-ins,
Copy codeThe Code is as follows:
$. Fn. tabBox. defaults = {
Width: 260,
Height: 200,
BasePath: "tabBox /"
};

Width and height define the width and height of the box. basePath is used to define the relative path of the page to the plug-in folder using the plug-in. This option is used only when it appears. Because an image is used in the tab style, you must have a baseline path to find the image path correctly. This also references the practice of a plug-in called jqtransform (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/), which also has a parameter to specify the location of the image folder. Of course, there is another way, is to WebUI (http://www.jqueryui.com/) The same style written to the css file, so the image reference is first on the path with the css file, these two are components of the plug-in, and their relative strength remains unchanged. Therefore, you do not need to provide this path. This method is not used because the plug-in uses less styles.

The principle of the plug-in is very simple. The core function is a render (), which is used to render the tab style:
Copy codeThe Code is as follows:
$. Fn. tabBox. render = function (){
$ (". TabBox" ).css ({
Width: $. fn. tabBox. defaults. width + "px ",
Height: $. fn. tabBox. defaults. height + "px ",
Position: "relative ",
Border: "1px # ccc solid ",
Background: "url (" + $. fn. tabBox. defaults. basePath + "tabHead.gif) top left repeat-x"
});
$ (". TabBox h2"). each (function (I ){
Certificate (this).css ({
Width: "80px ",
Height: "30px ",
Position: "absolute ",
"Border-top": "none ",
Cursor: "pointer ",
Left: 10 + (I * 80 ),
Background: "url (" + $. fn. tabBox. defaults. basePath + "tabNormal.gif) top right no-repeat ",
"Text-align": "center ",
"Font-size": "12px ",
"Font-weight": "normal ",
Color: "# 06c ",
"Line-height": "22px"
});
});
$ (". TabBox div"). each (function (){
Certificate (this).css ({
Width: $. fn. tabBox. defaults. width + "px ",
Height: ($. fn. tabBox. defaults. height-30) + "px ",
Display: "none ",
Position: "absolute ",
Top: "30px"
});
});
$ (". TabBox h2.curTab" detail .css ({
Background: "url (" + $. fn. tabBox. defaults. basePath + "tabCurTab.gif) top center no-repeat ",
"Font-weight": "bolder"
});
$ (". TabBox h2.curTab + div" ).css ({
Display: "block"
});
};

We can see that this function is all code for setting styles. (I also experienced the pleasure of setting css with jq. I still remember the era of e. style. backgroud ~), This function ensures that the currently activated tags and corresponding information are displayed. In addition, you can change the current activation tag by capturing the click Event of the tab, and then render it again.
Copy codeThe Code is as follows:
$ (". TabBox h2"). click (function (){
$ (". TabBox h2"). removeClass ("curTab ");
$ (This). addClass ("curTab ");
$. Fn. tabBox. render ();
});


A bit of thought after writing:

1. I am not familiar with plug-in customization options
Copy codeThe Code is as follows:
// Build main options before element iteration
Var opts = $. extend ({}, $. fn. tabBox. defaults, options );
// Iterate and reformat each matched element
Return this. each (function (){
$ This = $ (this );
// Build element specific options
Var o = $. meta? $. Extend ({}, opts, $ this. data (): opts;


This is almost copied from Mike Alsup's article. According to his statement, it seems that the options of the entire plug-in can be customized, and the options of a specific element can be defined. But I tried it and it seems that it is not ~. Didn't I understand what he said?

2. Currently, tabs capture click events. I Want To enhance it. You can define whether to capture click or mouseover. Yes, you can write two event processing functions. But how can we determine which processing program to call through configuration?
Package download