Question

我有三个jQuery选项卡，其中每个选项卡都有一个HTML表，每个表都实现了colResizable插件。问题是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
        });
    }        
});

我无法调整列的大小。

请您提供我应该如何解决此问题的指南。

提前致谢。美好的一天。

Answer 1

问题解决了!!!

除了show功能之外，colResizable插件还需要以select()的方式应用于$('#tabs').tabs()功能：

$('#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();
    }
});

感谢您考虑家伙!!!

colResizable插件在jQuery选项卡中不起作用

1 个答案: