2012-04-12 9 views
0

各タブにはcolResizableプラグインが各テーブルに実装されたHTMLテーブルがある3つのjQueryタブがあります。問題は、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(); 
    } 
}); 

感謝を!