顾名思义,这个插件就是方便的产生具有tab选项卡功能“盒子”的。看图一下就明白
这样功能在网页上是非常肠炎宁个的,不论前台后台。
在这,我首先提供了3个参数用于自定义插件,
代码如下:
$.fn.tabBox.defaults = {
width : 260,
height : 200,
basePath : "tabBox/"
};
插件的原理很简单,核心的函数就是一个render(),用于渲染出tab的样式:
代码如下:
$.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 p").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 + p").css({
display : "block"
});
};
代码如下:
$(".tabBox h2").click(function(){
$(".tabBox h2").removeClass("curTab");
$(this).addClass("curTab");
$.fn.tabBox.render();
});
代码如下:
// 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;