0

3つのjQueryタブがあり、各タブには、各テーブルにcolResizableプラグインが実装されたHTMLテーブルがあります。問題は、colResizableプラグインがjQueryタブ内で機能しないことです。

参照用に問題をいじろうと思いましたが、jsFiddleでcolResizablejavascriptファイルを参照する方法がわかりませんでした。

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 functionに加えて、プラグインは次のようにの関数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 に答える