jQuery plug-in tabBox implementation code

jQuery plug-in tabBox implementation code_jquery

WBOY

Release： 2016-05-16 18:34:47

Original

1197 people have browsed it

I checked the official plug-in writing document of jq (http://docs.jquery.com/Plugins/Authoring) and the article written by Mike Alsup recommended in the document A Plugin Development Pattern. My English is not very good, but I still tried my best to read it (I can learn knowledge and practice English at the same time, why not do it), and I wrote a debut novel - tabBox.

As the name suggests, this plug-in is a convenient way to generate "boxes" with tab function. Just look at the picture and you will understand that

This kind of function is very useful on the web page, regardless of the front or backend.

Here, I first provide 3 parameters for custom plug-in,

Copy code The code is as follows :

 
$.fn.tabBox.defaults = { 
width : 260, 
height : 200, 
basePath : "tabBox/" 
}; 
 

width and height define the width and height of the "box", and basePath is used to define the relative path of the page using the plug-in to the plug-in folder. This option appears as a last resort because pictures are used in the tab style, and there must be a reference path to correctly find the path of the picture. This is also based on the practice of a plug-in called jqtransform (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/), which also has a parameter Used to specify the location of the picture folder. Of course, there is another way, just like WebUI (http://www.jqueryui.com/), the style is written in the css file, so that the reference to the image is first compared with css file path, and both of these are components of the plug-in, and their relative paths remain unchanged. So there is no need to provide this path. Just because this plug-in uses relatively few styles, this method is not used.

The principle of the plug-in is very simple. The core function is a render(), which is used to render the tab style:

Copy code The 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) { 
$(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 all of this function It is the code for setting the style (it also allowed me to experience the pleasure of setting css with jq, and I still remember the era of e.style.backgroud~). This function ensures that the currently activated tag and the corresponding information are displayed. In addition, capture the click event of the tab to change the current active label and render it again.

Copy code The code is as follows:

$(".tabBox h2").click(function (){ 
$(".tabBox h2").removeClass("curTab"); 
$(this).addClass("curTab"); 
$.fn.tabBox.render(); 
}); 

Some thoughts after writing:

1. I don’t quite understand the plug-in customization options

Copy code The 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 him, it seems to be an option that can customize the entire plug-in. You can also define options for a specific element, but I tried it and it doesn’t seem to work~. Did I not understand what he said?

2. Currently, tab captures click events. I want to strengthen it. Now, you can customize whether to capture click or mouseover. Yes, you can write two event handlers. But how to decide which handler to call through configuration?
Package download