2012-04-12 117 views
0

我有三個jQuery選項卡,其中每個選項卡都有一個HTML表格,每個表格上都有colResizable插件。問題是colResizable插件在jQuery選項卡中不起作用。colResizable插件在jQuery選項卡中不起作用

我想擺弄我的問題作爲參考,但不確定如何引用jsFiddle中colResizable JavaScript文件。

下面是HTML:

<div id="tabs"> 
<ul id="alarmsTabs"> 
    <li><a id = "tab1" class='alarmtab' href="#fragment-CurrentAlarms">Current Alarms</a></li> 
    <li><a id = "tab2" class='alarmtab' href="#fragment-NotAckAlarms">Alarms Not Acknowledged</a></li>   
    <li><a id = "tab3" class='alarmtab' href="#fragment-AlarmLog" >Alarm Log</a></li> 
</ul> 
<div id="fragment-CurrentAlarms"> 
    <table id='CurrentAlarmTable' class='FacilityTableForScreens' cellspacing='0'> 
    </table> 
</div> 
<div id="fragment-NotAckAlarms">   
    <table id="AlarmNotAckTable" class="FacilityTableForScreens" cellspacing="0"> 
    </table>             
</div> 
<div id="fragment-AlarmLog">   
    <table id="AlarmLogTable" class="FacilityTableForScreens" cellspacing="0"> 
    </table> 
</div> 

而這就是我寫來實現jQuery的標籤和colResizable。

$("#tabs").tabs({ 
    selected: 0,   
    show: function(event, ui) 
    {   
     //selectedAlarmTab = ui.index;   
     $(ui['panel']).find('table').colResizable({ 
      liveDrag: true 
     }); 
    }   
}); 

我無法調整列的大小。

您能否就如何解決此問題提供指導意見。

在此先感謝。 美好的一天。

回答

2

問題解決了!

除了顯示功能,colResizable插件必須以這種方式$('#tabs').tabs()select()函數內部應用:

$('#tabs').tabs({ 
    selected: 0, 
    select: function(event, ui) { 
     var table = $(ui['panel']).find('table'); 
     $(table).colResizable({disable: true}); 
     $(table).colResizable(); 
    }, 
    show: function(event, ui) { 
     var table = $(ui['panel']).find('table'); 
     $(table).colResizable({disable: true}); 
     $(table).colResizable(); 
    } 
}); 

謝謝您考慮的傢伙!

相關問題