0

我有三个 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
        });
    }        
});

我无法调整列的大小。

您能否提供有关我应该如何解决此问题的指南。

提前致谢。再会。

4

1 回答 1

2

问题解决了！！！

除了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();
    }
});

感谢小伙伴们的考虑！！！

于 2012-04-26T07:18:20.230 回答