单击/激活 jQuery UI 选项卡时触发函数?

Posted

技术标签:

【中文标题】单击/激活 jQuery UI 选项卡时触发函数?【英文标题】:Trigger a function when a jQuery UI tab is clicked/made active? 【发布时间】:2012-07-12 12:54:08 【问题描述】:

我正在使用 jQuery 选项卡,其中一个选项卡中的内容是通过 AJAX 调用检索的。但是我不想在单击选项卡(激活)之前触发呼叫,因为用户可能不一定会单击它。最好的方法是什么?

jQuery UI提供@ 987654321和show 987654322 show事件的选项卡,但这些火灾当选择或显示任何 em>选项卡时,而不仅仅是一个特定于特定的(据我所知)。

我还尝试将 click 事件分配给特定选项卡的 ID:

$("#my-tab").click(function()
...
     $.post(URL, function(data)
          ...
     );
...

但这似乎没有任何效果,并且从未触发调用。

【问题讨论】:

【参考方案1】:

勾选的解决方案不再起作用,因为jquery-ui has changed。您还需要在整个选项卡集上调用选项卡功能,而不仅仅是一个选项卡。需要更换 ui.index 。如果第二个面板的 id 为“tab2”,那么您可以使用:

$("#tabs").tabs(
    activate: function(event, ui) 
       if (ui.newPanel.selector == "#tab2") 
            alert("tab 2 selected");
       
    
);

【讨论】:

【参考方案2】:

Ui-tabs 提供了一个功能,当您选择一个选项卡时会触发该功能。

$( ".yourTab" ).tabs(
   select: function(event, ui) 
        if(ui.index == myTabIndex) 
            $.post(URL, function(data)
              ...
            );
        
   
);

注意新版本使用activate

reference

【讨论】:

完美运行!我不知道如何将select 仅用于特定选项卡。谢谢! @RicardoAlvaroLohmann 这很好用,但我没有在文档中看到 select: 对象,在我找到它之前就在那儿。 @Popo 我想它已经被activate取代了。【参考方案3】:

你可以试试这样的:

/*tab placeholder*/.tabs(
    select: function(event, ui) 
       if(ui.item.id === "my-tab")
           //explicitly trigger mouse click on tab
           $(ui.item).trigger('click');
       
    
);
//------------------
$("#my-tab").click(function()
    alert('something')
);

【讨论】:

【参考方案4】:

select 事件有一个ui 参数,您可以在其中检查所选选项卡的index。这个 SO question 有很多例子: jQuery UI Tabs Get Currently Selected Tab Index

当您检查了选项卡的index 后,您就可以进行 ajax 调用了。

编辑:您在官方 Jquery UI 文档中也有很多示例:http://docs.jquery.com/UI/Tabs

【讨论】:

以上是关于单击/激活 jQuery UI 选项卡时触发函数?的主要内容,如果未能解决你的问题,请参考以下文章

创建2个可以相互通信的jquery插件

在通知上选项卡时未触发解析 onPushOpen

JQuery UI选项卡导致屏幕“跳转”

单击 QDockWidget 的选项卡时的通知?

jQuery UI 选项卡 - 如何获取当前选定的选项卡索引

单击活动选项卡的选项卡事件