jQuery プラグイン tabBox 実装 code_jquery

$.fn.tabBox.defaults = {
幅 : 260,
高さ : 200,
basePath : "tabBox/"
};

$.fn.tabBox.render = function() {
$(".tabBox").css({
幅 : $.fn.tabBox .defaults.width "px"、
高さ : $.fn.tabBox.defaults.height "px"、
位置 : "相対"、
境界 : " 1px #ccc ソリッド",
背景 : "url(" $.fn.tabBox.defaults.basePath "tabHead.gif) 左上repeat-x"
});
$(".tabBox h2 ").each(function(i) {
$(this).css({
幅 : "80px",
高さ : "30px",
位置 : "絶対",
"border-top" : "none "、
cursor : "pointer"、
left : 10 (i*80)、
background : "url(" $.fn.tabBox.defaults.basePath "tabNormal.gif) 右上 no-repeat"、
"text-align" : "center"、
"font-size" : "12px"、
"font-weight" : "normal" ,
color : "#06c ",
"line-height" : "22px"
})
});
$(".tabBox div").each(function) (){
$(this ).css({
幅 : $.fn.tabBox.defaults.width "px",
高さ : ($.fn.tabBox.defaults.height-30) "px",
表示: "なし",
位置: "絶対",
トップ: "30px"
}); h2.curTab").css({
background : "url(" $.fn.tabBox.defaults.basePath "tabCurTab.gif) 上部中央 no-repeat",
"font-weight" : "bolder "
});
$(".tabBox h2.curTab div").css({
display : "block"
});
};


この関数のすべてを見ることができます スタイルを設定するためのコードです (私も jq で CSS を設定する楽しさを体験することができました。この関数は e.style.backgroud の時代を今でも覚えています)。現在アクティブ化されているタグと対応する情報が表示されるようにします。さらに、タブのクリック イベントをキャプチャして、現在アクティブなラベルを変更し、再度レンダリングします。

$(this).addClass("curTab");
$.fn.tabBox.render ();
});



書いた後の感想: