用jQuery打造TabPanel效果代碼

更新時(shí)間：2010年05月22日 02:24:54 作者：

這次我們要實(shí)現(xiàn)的控件時(shí)Tab控件，在實(shí)際的應(yīng)用中也比較多

如大量信息查看，當(dāng)網(wǎng)頁(yè)多窗口框架等都會(huì)用到，現(xiàn)在網(wǎng)上基于jquery Tab控件，其實(shí)也蠻多了，我以前用過(guò)的idtabs，就比較簡(jiǎn)單實(shí)用，也是比較靈活，但是對(duì)于復(fù)雜情況就要編碼多些，太簡(jiǎn)單了些。還有就是jquery UI的里面的tab控件（沒(méi)用過(guò)，我對(duì)jquery ui不太感冒），另外就是近期有點(diǎn)小火的easyui 中的tab控件，最早在javaeye上面看到的，界面還算漂亮，因?yàn)橹皼](méi)開(kāi)源，所以一直沒(méi)跟進(jìn)（好像最近開(kāi)源了，前幾天下載了看看，編碼風(fēng)格有點(diǎn)像prototype,看不出jquery的影子，不知道為什么叫jquery easyui呵呵，因?yàn)闆](méi)太深入去學(xué)習(xí)，也不好做其他評(píng)價(jià)）。說(shuō)了那么多，我們還是回到主題，因?yàn)榉N種原因不得不想著自己開(kāi)發(fā)一個(gè)吧。于是就有了這篇，先來(lái)看看效果吧。

下圖是單網(wǎng)頁(yè)多窗口框架的效果圖

下圖是文末提供調(diào)用示例的效果截圖。

大家可以看到了還是使用ExtJs的效果。其實(shí)CSS基本上是直接copy它的。我覺(jué)得它那個(gè)就非常好看，當(dāng)然實(shí)際使用的時(shí)候大家有能力完全可以自己樣子

第一我們還是從HTML開(kāi)始吧

注：我先控件的思路始終是先確定HTML結(jié)構(gòu)，其次是樣式，最終才是js實(shí)現(xiàn)的事件方法等。

其實(shí)看圖我們就可以基本確定，tab控件主要有兩個(gè)部分的html 一個(gè)是頭，用于放tab選項(xiàng)卡的；另外一個(gè)是體，是內(nèi)容的容器。那么就是兩個(gè)Div容器，講tab控件分成了header和body兩部分。

其中header部分因?yàn)榘噙x項(xiàng)卡所以很容易想到ul +li的配合。來(lái)看一下header中的實(shí)際html結(jié)構(gòu)

通過(guò)通過(guò)其中l(wèi)i即是一個(gè)選項(xiàng)卡，第一個(gè)a是關(guān)閉按鈕，第二個(gè)a才是實(shí)際內(nèi)容通過(guò)嵌套標(biāo)簽來(lái)實(shí)現(xiàn) 左右中的背景圖片設(shè)置（這個(gè)做法比較多見(jiàn)的）。當(dāng)然能夠有個(gè)好的效果，還是要靠CSS支持。必須對(duì)CSS有一定的了解。

Body的結(jié)構(gòu)則更簡(jiǎn)單就是div嵌套div就就結(jié)束了。

第二 CSS樣式表

因?yàn)镃SS是copy EXTJS的我也就不多介紹了。大家可以看代碼下載里面的實(shí)際代碼，如果有問(wèn)題可以再溝通交流

第三：開(kāi)始編寫(xiě)JS了

老規(guī)矩先來(lái)一段完整的JS代碼，大概有500行左右的代碼，其實(shí)我換行比較勤快，實(shí)際的代碼量其實(shí)還是比較少。

復(fù)制代碼代碼如下:

 
; (function ($) { 
$.fn.tabpanel =function(option){ 
var dfop ={ 
items:[], //選項(xiàng)卡數(shù)據(jù)項(xiàng) {id,text,classes,disabled,closeable,content,url,cuscall,onactive} 
width:500, 
height:400, 
scrollwidth:100,//如果存在滾動(dòng)條，點(diǎn)擊按鈕次每次滾動(dòng)的距離 
autoscroll:true //當(dāng)選項(xiàng)卡寬度大于容器時(shí)自動(dòng)添加滾動(dòng)按鈕 
}; 
var headerheight=28; 
$.extend(dfop, option); 
var me =$(this).addClass("x-tab-panel").width(dfop.width); 
innerwidth = dfop.width-2; 
//構(gòu)建Tab的Html 
var tcs= dfop.autoscroll?"x-tab-scrolling-top":""; 
var header = $("<div class='x-tab-panel-header x-unselectable "+tcs+"' unselectable='on' style='width:"+innerwidth+"px;MozUserSelect:none;KhtmlUserSelect:none;'></div>"); 
var stripwrap = $("<div class='x-tab-strip-wrap'/>"); 
var scrollerright = $("<div class='x-tab-scroller-right x-unselectable' style='height: 24px; visibility: hidden; mozuserselect: none; khtmluserselect: none;' unselectable='on'/>"); 
var scrollerleft = $("<div class='x-tab-scroller-left x-unselectable' style='height: 24px; visibility: hidden; mozuserselect: none; khtmluserselect: none;' unselectable='on'/>"); 
var ulwrap = $("<ul class='x-tab-strip x-tab-strip-top'></ul>"); 
var stripspacer = $("<div class='x-tab-strip-spacer'/>"); 
var litemp =[]; 
for(var i=0,l=dfop.items.length; i<l ;i++) 
{ 
var item =dfop.items[i]; 
builditemlihtml(item,litemp); 
} 
litemp.push("<li class='x-tab-edge'/><div class='x-clear'></div>"); 
ulwrap.html(litemp.join("")); 
litemp =null; 
stripwrap.append(ulwrap); 
if(dfop.autoscroll) 
{ 
header.append(scrollerright).append(scrollerleft); 
} 
header.append(stripwrap).append(stripspacer); 
var bodyheight=dfop.height-headerheight; 
var bodywrap = $("<div class='x-tab-panel-bwrap'/>"); 
var body = $("<div class='x-tab-panel-body x-tab-panel-body-top'/>").css({width:innerwidth,height:bodyheight}); 
var bodytemp=[]; 
for(var i=0,l=dfop.items.length; i<l ;i++){ 
var item =dfop.items[i]; 
builditembodyhtml(item,bodytemp); 
} 
body.html(bodytemp.join("")).appendTo(bodywrap); 
me.append(header).append(bodywrap); 
initevents(); 
function builditemlihtml(item,parray) 
{ 
parray.push("<li id='tab_li_",item.id,"' class='",item.isactive?"x-tab-strip-active":"",item.disabled?"x-tab-strip-disabled":"",item.closeable?" x-tab-strip-closable":"",item.classes?" x-tab-with-icon":"","'>"); 
parray.push("<a class='x-tab-strip-close' onclick='return false;'/>"); 
parray.push("<a class='x-tab-right' onclick='return false;' href='#'>"); 
parray.push("<em class='x-tab-left'><span class='x-tab-strip-inner'><span class='x-tab-strip-text ",item.classes||"","'>",item.text,"</span></span></em>"); 
parray.push("</a></li>"); 
} 
function builditembodyhtml(item,parray) 
{ 
parray.push("<div class='x-panel x-panel-noborder",item.isactive?"":" x-hide-display","' id='tab_item_",item.id,"' style='width:",innerwidth,"px'>"); 
parray.push("<div class='x-panel-bwrap'>"); 
parray.push("<div class='x-panel-body x-panel-body-noheader x-panel-body-noborder' id='tab_item_content_",item.id,"' style='position:relative; width:",innerwidth,"px; height:",bodyheight,"px; overflow: auto;'>"); 
if(item.url){ 
parray.push("<iframe name='tab_item_frame_",item.id,"' width='100%' height='100%' id='tab_item_frame_",item.id,"' src='about:blank' frameBorder='0' />"); 
} 
else if(item.cuscall){ 
parray.push("<div class='loadingicon'/>"); 
} 
else{ 
parray.push(item.content); 
} 
parray.push("</div></div></div>"); 
} 
function initevents() 
{ 
//reset scoller 
resetscoller(); 
scollerclick(); 
ulwrap.find("li:not(.x-tab-edge)").each(function(e){ 
inititemevents(this); 
}); 
} 
function inititemevents(liitem) 
{ 
liswaphover.call(liitem); 
liclick.call(liitem); 
closeitemclick.call(liitem); 
} 
function scollerclick() 
{ 
if(dfop.autoscroll) 
{ 
scrollerleft.click(function(e){scolling("left")}); 
scrollerright.click(function(e){scolling("right")}); 
} 
} 
function resetscoller() 
{ 
if(dfop.autoscroll) 
{ 
var edge = ulwrap.find("li.x-tab-edge"); 
var eleft =edge.position().left; 
var sleft = stripwrap.attr("scrollLeft"); 
if( sleft+eleft>innerwidth ) 
{ 
header.addClass("x-tab-scrolling"); 
scrollerleft.css("visibility","visible"); 
scrollerright.css("visibility","visible"); 
if(sleft>0) 
{ 
scrollerleft.removeClass("x-tab-scroller-left-disabled"); 
} 
else{ 
scrollerleft.addClass("x-tab-scroller-left-disabled"); 
} 
if(eleft>innerwidth) 
{ 
scrollerright.removeClass("x-tab-scroller-right-disabled"); 
} 
else{ 
scrollerright.addClass("x-tab-scroller-right-disabled"); 
} 
dfop.showscrollnow =true; 
} 
else 
{ 
header.removeClass("x-tab-scrolling"); 
stripwrap.animate({"scrollLeft":0},"fast"); 
scrollerleft.css("visibility","hidden"); 
scrollerright.css("visibility","hidden"); 
dfop.showscrollnow =false; 
} 
} 
} 
// 
function scolling(type,max) 
{ 
//debugger; 
if(!dfop.autoscroll || !dfop.showscrollnow) 
{ 
return; 
} 
//debugger; 
//var swidth = stripwrap.attr("scrollWidth"); 
var sleft = stripwrap.attr("scrollLeft"); 
var edge = ulwrap.find("li.x-tab-edge"); 
var eleft = edge.position().left ; 
if(type=="left"){ 
if(scrollerleft.hasClass("x-tab-scroller-left-disabled")) 
{ 
return; 
} 
if(sleft-dfop.scrollwidth-20>0) 
{ 
sleft -=dfop.scrollwidth; 
} 
else{ 
sleft =0; 
scrollerleft.addClass("x-tab-scroller-left-disabled"); 
} 
if(scrollerright.hasClass("x-tab-scroller-right-disabled")) 
{ 
scrollerright.removeClass("x-tab-scroller-right-disabled"); 
} 
stripwrap.animate({"scrollLeft":sleft},"fast"); 
} 
else{ 
if(scrollerright.hasClass("x-tab-scroller-right-disabled") && !max) 
{ 
return; 
} 
//left + ; 
if(max || (eleft>innerwidth && eleft-dfop.scrollwidth-20<=innerwidth)) 
{ 
//debugger; 
sleft = sleft+eleft-(innerwidth-38) ; 
scrollerright.addClass("x-tab-scroller-right-disabled"); 
// sleft = eleft-innerwidth; 
} 
else 
{ 
sleft +=dfop.scrollwidth; 
} 
if(sleft>0) 
{ 
if(scrollerleft.hasClass("x-tab-scroller-left-disabled")) 
{ 
scrollerleft.removeClass("x-tab-scroller-left-disabled"); 
} 
} 
stripwrap.animate({"scrollLeft":sleft},"fast"); 
} 
} 
function scollingToli(liitem) 
{ 
var sleft = stripwrap.attr("scrollLeft"); 
var lleft = liitem.position().left; 
var lwidth = liitem.outerWidth(); 
var edge = ulwrap.find("li.x-tab-edge"); 
var eleft = edge.position().left ; 
if(lleft<=0) 
{ 
sleft +=(lleft-2) ; 
if(sleft<0) 
{ 
sleft=0; 
scrollerleft.addClass("x-tab-scroller-left-disabled"); 
} 
if(scrollerright.hasClass("x-tab-scroller-right-disabled")) 
{ 
scrollerright.removeClass("x-tab-scroller-right-disabled"); 
} 
stripwrap.animate({"scrollLeft":sleft},"fast"); 
} 
else{ 
if(lleft+lwidth>innerwidth-40) 
{ 
sleft = sleft+lleft+lwidth+-innerwidth+40; // 40 =scrollerleft and scrollerrightwidth; 
if(scrollerleft.hasClass("x-tab-scroller-left-disabled")) 
{ 
scrollerleft.removeClass("x-tab-scroller-left-disabled"); 
} 
//滾到最后一個(gè)了，那么就要禁用right; 
if(eleft-(lleft+lwidth+-innerwidth+40)<=innerwidth) 
{ 
scrollerright.addClass("x-tab-scroller-right-disabled"); 
} 
stripwrap.animate({"scrollLeft":sleft},"fast"); 
} 
} 
liitem.click(); 
} 
function liswaphover() 
{ 
$(this).hover(function(e){ 
if(!$(this).hasClass("x-tab-strip-disabled")) 
{ 
$(this).addClass("x-tab-strip-over"); 
} 
},function(e){ 
if(!$(this).hasClass("x-tab-strip-disabled")) 
{ 
$(this).removeClass("x-tab-strip-over"); 
} 
}); 
} 
function closeitemclick() 
{ 
if($(this).hasClass("x-tab-strip-closable")) 
{ 
$(this).find("a.x-tab-strip-close").click(function(){ 
deleteitembyliid($(this).parent().attr("id")); 
}); 
} 
} 
function liclick() 
{ 
$(this).click(function(e){ 
var itemid = this.id.substr(7); 
var curr = getactiveitem(); 
if( curr !=null && itemid == curr.id) 
{ 
return; 
} 
var clickitem = getitembyid(itemid); 
if(clickitem && clickitem.disabled) 
{ 
return ; 
} 
if(curr) 
{ 
$("#tab_li_"+curr.id).removeClass("x-tab-strip-active"); 
$("#tab_item_"+curr.id).addClass("x-hide-display"); 
curr.isactive =false; 
} 
if(clickitem) 
{ 
$(this).addClass("x-tab-strip-active"); 
$("#tab_item_"+clickitem.id).removeClass("x-hide-display"); 
if(clickitem.url) 
{ 
var cururl = $("#tab_item_frame_"+clickitem.id).attr("src"); 
if(cururl =="about:blank") 
{ 
$("#tab_item_frame_"+clickitem.id).attr("src",clickitem.url); 
} 
} 
else if(clickitem.cuscall && !clickitem.cuscalled) 
{ 
var panel = $("#tab_item_content_"+clickitem.id); 
var ret = clickitem.cuscall(this,clickitem,panel); 
clickitem.cuscalled =true; 
if(ret) //如果存在返回值，且不為空 
{ 
clickitem.content = ret; 
panel.html(ret); 
} 
} 
clickitem.isactive =true; 
if(clickitem.onactive) 
{ 
clickitem.onactive.call(this,clickitem); 
} 
} 
}); 
} 
//獲取當(dāng)前活躍項(xiàng) 
function getactiveitem() 
{ 
for(var i=0,j=dfop.items.length;i<j ;i++) 
{ 
if(dfop.items[i].isactive) 
{ 
return dfop.items[i]; 
break; 
} 
} 
return null; 
} 
//根據(jù)ID獲取Item數(shù)據(jù) 
function getitembyid(id) 
{ 
for(var i=0,j=dfop.items.length;i<j ;i++) 
{ 
if(dfop.items[i].id == id) 
{ 
return dfop.items[i]; 
break; 
} 
} 
return null; 
} 
function getIndexbyId(id) 
{ 
for(var i=0,j=dfop.items.length;i<j ;i++) 
{ 
if(dfop.items[i].id == id) 
{ 
return i; 
break; 
} 
} 
return -1; 
} 
//添加項(xiàng) 
function addtabitem(item) 
{ 
var chkitem =getitembyid(item.id); 
if(!chkitem){ 
var isactive =item.isactive; 
item.isactive =false; 
var lastitem = dfop.items[dfop.items.length-1]; 
dfop.items.push(item); 
var lastli = $("#tab_li_"+lastitem.id); 
var lastdiv = $("#tab_item_"+lastitem.id); 
var litemp =[]; 
var bodytemp = []; 
builditemlihtml(item,litemp); 
builditembodyhtml(item,bodytemp); 
var liitem = $(litemp.join("")); 
var bodyitem= $(bodytemp.join("")); 
lastli.after(liitem); 
lastdiv.after(bodyitem); 
//事件 
var li = $("#tab_li_"+item.id); 
inititemevents(li); 
if(isactive) 
{ 
li.click(); 
} 
resetscoller(); 
scolling("right",true); 
} 
else{ 
alert("指定的tab項(xiàng)已存在!"); 
} 
} 
function openitemOrAdd(item,allowAdd) 
{ 
var checkitem = getitembyid(item.id); 
if(!checkitem && allowAdd ) 
{ 
addtabitem(item); 
} 
else{ 
var li = $("#tab_li_"+item.id); 
scollingToli(li); 
} 
} 
//移除一個(gè)tab 項(xiàng) 
function deleteitembyliid(liid) 
{ 
var id= liid.substr(7); 
$("#"+liid).remove(); 
$("#tab_item_"+id).remove(); 
var index = getIndexbyId(id); 
if(index>=0) 
{ 
var nextcur; 
if(index < dfop.items.length -1) 
{ 
nextcur = dfop.items[index+1]; 
} 
else if(index>0){ 
nextcur = dfop.items[index-1]; 
} 
if(nextcur) 
{ 
$("#tab_li_"+nextcur.id).click(); 
} 
dfop.items.splice(index,1); 
resetscoller(); 
scolling("right",true); 
} 
} 
function resize(width,height) 
{ 
if(width ==dfop.width && height ==dfop.height) 
{ 
return; 
} 
if(width){ dfop.width=width}; 
if(height){ dfop.height =height;} 
innerwidth = width-2; 
bodyheight=dfop.height-headerheight; 
me.css("width",dfop.width); 
header.css("width",innerwidth); 
body.css({width:innerwidth,height:bodyheight}); 
for(var i=0,j=dfop.items.length;i<j;i++) 
{ 
var item =dfop.items[i]; 
$("#tab_item_"+item.id).css({width:innerwidth}); 
$("#tab_item_content_"+item.id).css({width:innerwidth,height:bodyheight}); 
} 
resetscoller(); 
} 
//設(shè)置選項(xiàng)卡項(xiàng)是否disabled 
function setdisabletabitem(itemId,disabled) 
{ 
var chitem= getitembyid(itemId); 
if(!chitem || chitem.disabled ==disabled) 
{ 
return; 
} 
if(disabled) 
{ 
chitem.disabled =true; 
$("#tab_item_"+item.id).addClass("x-tab-strip-disabled"); 
} 
else{ 
chitem.disabled =false; 
$("#tab_item_"+item.id).removeClass("x-tab-strip-disabled"); 
} 
} 
me[0].tab = { 
addtabitem:addtabitem, 
opentabitem:openitemOrAdd, 
resize:resize, 
setdisabletabitem:setdisabletabitem 
}; 
}; 
$.fn.addtabitem =function(item) 
{ 
if(this[0].tab) 
{ 
return this[0].tab.addtabitem(item); 
} 
return false; 
} 
$.fn.opentabitem =function(item,orAdd) 
{ 
if(this[0].tab) 
{ 
return this[0].tab.opentabitem(item,orAdd); 
} 
return false; 
} 
$.fn.resizetabpanel =function(w,h) 
{ 
if(this[0].tab) 
{ 
return this[0].tab.resize(w,h); 
} 
return false; 
} 
$.fn.setdisabletabitem =function(itemId,disabled) 
{ 
if(this[0].tab) 
{ 
return this[0].tab.setdisabletabitem(itemId,disabled); 
} 
return false; 
} 
})(jQuery); 

接著我們來(lái)一步一步來(lái)分析我的實(shí)現(xiàn)，開(kāi)始還是編寫(xiě)jQuery控件的“模板”,關(guān)于為什么要這么寫(xiě)，請(qǐng)參考這篇的說(shuō)明

復(fù)制代碼代碼如下:

 
; (function ($) { 
$.fn.tabpanel =function(option){ 
}; 
)(jQuery); 

接著就是編寫(xiě)默認(rèn)參數(shù)

復(fù)制代碼代碼如下:

var dfop ={ 
items:[], //選項(xiàng)卡數(shù)據(jù)項(xiàng) {id,text,classes,disabled,closeable,content,url,cuscall,onactive} 
width:500, 
height:400, 
scrollwidth:100,//如果存在滾動(dòng)條，點(diǎn)擊按鈕次每次滾動(dòng)的距離 
autoscroll:true //當(dāng)選項(xiàng)卡寬度大于容器時(shí)自動(dòng)添加滾動(dòng)按鈕 
}; 

默認(rèn)參數(shù)還是比較簡(jiǎn)單，我已加上了注釋，其中就是item數(shù)組的項(xiàng)麻煩些，不過(guò)我相信大家通過(guò)字面的意思就已經(jīng)知道大半了，我還是描述一下吧：id 即標(biāo)示，必須唯一、text顯示的文本、classes 特定的樣式，如效果中的主頁(yè)，我加了個(gè)圖標(biāo)，就通過(guò)此屬性實(shí)現(xiàn)、disabled 是否禁用、closeable 是否可關(guān)閉、

content 和url 和cuscall 三個(gè)只要設(shè)置其中之一即可，content就是實(shí)際的內(nèi)容html、url標(biāo)示內(nèi)容為網(wǎng)頁(yè)，自動(dòng)往內(nèi)容中添加iframe，cuscall則是自定義，即內(nèi)容顯示什么有cuscall執(zhí)行的結(jié)果來(lái)決定，可通過(guò)此屬性來(lái)實(shí)現(xiàn)異步content內(nèi)容。

onactive是指當(dāng)tab項(xiàng)被激活時(shí)觸發(fā)的事件。是一個(gè)接受item內(nèi)容的函數(shù)，詳見(jiàn)demo

參數(shù)設(shè)置完了，通過(guò)外部傳遞的參數(shù)來(lái)更新默認(rèn)的參數(shù)：

$.extend(dfop, option);

接著就是構(gòu)建html的部分，這部分比較長(zhǎng)，我就不重復(fù)貼代碼了。

當(dāng)我們把html構(gòu)建完成之后，就要給html元素添加事件，包括選項(xiàng)卡的點(diǎn)擊事件，左移按鈕，右移按鈕的點(diǎn)擊事件，選項(xiàng)卡的鼠標(biāo)hover效果事件等。

復(fù)制代碼代碼如下:

 

function initevents() 
{ 
//reset scoller 
resetscoller(); //設(shè)置默認(rèn)是否出現(xiàn)滾動(dòng)掉 
scollerclick(); //滾動(dòng)條的點(diǎn)擊事件，如果存在的話 
ulwrap.find("li:not(.x-tab-edge)").each(function(e){ 
inititemevents(this); //給每個(gè)選項(xiàng)卡 添加事件 
}); 
} 
function inititemevents(liitem) 
{ 
liswaphover.call(liitem); //選項(xiàng)卡的鼠標(biāo)hover效果 
liclick.call(liitem); //選項(xiàng)卡的點(diǎn)擊事件 
closeitemclick.call(liitem); // 點(diǎn)擊關(guān)閉按鈕的事件 
} 

至于事件的實(shí)現(xiàn)，其實(shí)一個(gè)個(gè)來(lái)做，各個(gè)擊破也就簡(jiǎn)單了。主要繁瑣在控制滾動(dòng)按鈕的出現(xiàn)和禁用等的處理上，其他點(diǎn)擊事件等都比較簡(jiǎn)單。

最后就是公開(kāi)方法，和為了公開(kāi)這些方法來(lái)編寫(xiě)一些內(nèi)部方法，這個(gè)tabpanel自然還是比較簡(jiǎn)單易用，同時(shí)擴(kuò)展性。大家可以根據(jù)實(shí)際的需求做些調(diào)整，當(dāng)然現(xiàn)在的功能應(yīng)該也滿足大部分的要求了。

最后來(lái)看一下公開(kāi)了哪些方法：

1：動(dòng)態(tài) 新增tab項(xiàng)的方法，即通過(guò)js動(dòng)態(tài)新增tab項(xiàng)，這里其實(shí)就是對(duì)items數(shù)據(jù)的維護(hù)，然后重新調(diào)用tabitem的輸出html方法，最后單獨(dú)為其設(shè)置事件。簡(jiǎn)單

2：選中或者新增。這也是通過(guò)js調(diào)用的方法，是對(duì)上一方法的擴(kuò)展，即可通過(guò)js讓某個(gè)tab項(xiàng)激活，如果該項(xiàng)不存在則通過(guò)參數(shù)來(lái)新增該選項(xiàng)卡

3：重新設(shè)置tabpanel的大小，即通過(guò)js重新設(shè)置tabpanel的大小，這個(gè)在窗口大小變化時(shí)調(diào)用，非常實(shí)用哦。

4：設(shè)置某項(xiàng)為禁用，通過(guò)js方法設(shè)置某項(xiàng)tabitem狀態(tài)為禁用。

最后大家可以通過(guò) 代碼包括之前控件的實(shí)例，我已經(jīng)提供了一個(gè)壓縮包，但是我更推薦大家實(shí)用SVN獲取最新代碼。因?yàn)橛械臅r(shí)候一些小的變動(dòng)我就不發(fā)文告知了。

http://code.google.com/p/xjplugin/downloads/list

http://xiazai.jb51.net/201005/yuanma/xjPlugin_addtabpanel.rar

您可能感興趣的文章: