0

我有以下功能：

function createTabs( selectorText, selected ) {
    var tabs = $( selectorText ).tabs();        
    if( selectorText == '#content .tabs' ) {
        contentTabs = tabs;
        $( selectorText ).unbind( 'tabsselect' ).bind( 'tabsselect', function( event, ui ) {            
            var queryNumber = $( ui.tab ).data('query_number');
            if( queryNumber ) {
                $( ui.panel ).html( '<table id="table"></table>' )
                var table = $( ui.panel ).find( 'table' );
                populateFlexigrid( table, queryNumber );
            }
        });
    }

    if( !selected ) {
        selected = 0;
        tabs.tabs( 'select', 0 )
    }
    tabs.tabs( 'select', selected );
}

在if函数末尾的语句中，我将选定的选项卡设置为应选择的任何选项卡。进入此if语句时，选择的选项卡始终为 0，因为刚刚创建了选项卡。所以我的问题是我试图选择一个已经选择的选项卡。这意味着我绑定到该选项卡的功能没有执行。

有什么方法可以强制选择选项卡或该tabsselect选项卡上的事件，以便我的绑定功能运行？

4

2 回答 2

2

我不喜欢这个解决方案，但它正在工作。如果有人有更好的方法，请发布。

var selectedTab = $tabs.tabs('option', 'selected');
$tabs.find('li').eq(selectedTab).removeClass('ui-tabs-selected').end().tabs('select', selectedTab);
于 2012-04-26T19:22:41.770 回答
0

tabs.trigger('tabsselect');选择选项卡后尝试添加。

更新：

很抱歉延迟了这个，但我终于找到了一些时间来解决这个问题。

尝试将“tabsselect”函数重写为命名函数（不是匿名函数），这样您就可以随时调用它（在构造ui事件提供的参数之后）。下面的示例代码（和工作小提琴）：

function tabSelected(event, ui) {
    var queryNumber = $(ui.tab).data('query_number');
    var table = $(ui.panel).find('table');
    console.log('Tab ' + ui.index + ' "tabsselect" event triggered.');
    if (queryNumber) {
        $(ui.panel).html('<table id="table"></table>');
        populateFlexigrid(table, queryNumber);
    }
}

function createTabs(selectorText, selected) {
    var tabs = $(selectorText).tabs();
    var tab = null;
    var panel = null;
    var ui = {
        "index": 0,
        "panel": tab,
        "tab": panel
    };

    if (selectorText == '#content .tabs') {
        contentTabs = tabs;
        $(selectorText).unbind('tabsselect').bind('tabsselect', tabSelected);
    }

    if (!selected) {
        selected = 0;
        tabs.tabs('select', 0);
    }

    //create the ui parameter
    ui.index = selected;
    ui.tab = $(tabs.children('ul:first').children('li')[selected]).children('a')[0];
    ui.panel = tabs.children('div')[selected];

    //run the "tabsselect" function
    tabSelected(null, ui);
}
createTabs('#content .tabs', 0);​
于 2012-04-26T19:02:28.363 回答