Check out JQ's official plugin documentation ( http://docs.jquery.com/Plugins/AuthoringAnd Mike Alsup, as recommended in the document. A Plugin Development pattern。 English is not very good, but still try to look down (both to learn knowledge and can practice English, he le), Suit wrote a debut--tabbox.
As the name suggests, this plug-in is convenient to produce with TAB tab function "box". Just look at the picture and see
This function on the Web page is very enteritis ning, regardless of the foreground backstage.
Here, I first provided 3 parameters for customizing Plug-ins,
Copy Code code as follows:
$.fn.tabbox.defaults = {
width:260,
HEIGHT:200,
BasePath: "tabbox/"
};
Width and height define the breadth and height of the box, BasePath is used to define the relative path to the plug-in folder for pages using Plug-ins. This option appears as a last resort, because the tabs are styled with a picture, and you must have a datum path to correctly find the path to the picture. This is also a reference to a name Jqtransform ( http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/Plugin, he also has a parameter to specify where the picture folder is located. There is, of course, a way to WebUI ( http://www.jqueryui.com/Like, the style is written to the CSS file, so that the picture is a reference to the first and the CSS file path, and these two are components of plug-ins, relative road strength is unchanged. So there's no need to provide this path. This method is not used because the plugin uses fewer styles.
The principle of the plug-in is very simple, the core function is a render (), used to render the tab style:
Copy Code code 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) {
$ (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 () {
$ (this). CSS ({
Width: $.fn.tabbox.defaults.width+ "px",
Height: ($.fn.tabbox.defaults.height-30) + "px",
Display: "None",
Position: "Absolute",
Top: "30px"
});
});
$ (". Tabbox h2.curtab"). CSS ({
Background: "URL (" +$.fn.tabbox.defaults.basepath+ "tabcurtab.gif) Top center No-repeat",
"Font-weight": "Bolder"
});
$ (". Tabbox H2.curtab + div"). css ({
Display: "Block"
});
};
You can see that this function is all set style code, (also let me experience the pleasure of using JQ to set CSS, still remember the era of E.style.backgroud ~), this function ensures that the current activated label and corresponding information. In addition, you can change the current Activation tab by capturing the Tab tab's Click event and then rendering it again.
Copy Code code as follows:
$ (". Tabbox h2"). Click (function () {
$ (". Tabbox h2"). Removeclass ("Curtab");
$ (this). addclass ("Curtab");
$.fn.tabbox.render ();
});
After writing a little thought:
1, the plug-in customization options do not understand the practice
Copy Code code 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 a copy of Mike Alsup's article. As he said, it seems that you can customize the entire plug-in options, but also to define a specific element of the options, but I tried, it seems not to ~. Did I not understand what he said?
2, the current tab is to capture the click event, I would like to strengthen, can be customized to capture click or mouseover, yes, you can write two event processing functions. But how do you decide which handler to call through configuration?
Package download
