检测 jQueryUI 下的选项卡被选中

发布于 2024-11-17 08:41:30 字数 408 浏览 6 评论 0原文

我试图检测何时单击 jQueryui 选项卡组件上的新选项卡。我已经遵循了一些指南和博客，但无法理解整个过程。我有以下情况：

$('#tabs').tabs({
  select: function(event,ui) {
  alert('selected');
  return false;
  },                
});

我不知道我错过了什么，但警报永远不会触发。我对 jQuery 不太熟悉，所以我可能犯了一个愚蠢的错误，所以任何帮助将不胜感激。

谢谢， Kris

更新：jsfiddle 示例 http://jsfiddle.net/T7czp/16/

原文

I am trying to detect when a new tab on my jQueryui tab component is clicked. I have followed several guides and blogs, but can't wrap my head around the process. I have the following:

$('#tabs').tabs({
  select: function(event,ui) {
  alert('selected');
  return false;
  },                
});

I don't know what I'm missing, but the alert never fires. I'm am not strong with jQuery so I'm probably making a stupid mistake, so any help will be appreciated.

Thanks,
Kris

Update: jsfiddle example http://jsfiddle.net/T7czp/16/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

总攻大人 2024-11-24 08:41:30

最新版本使用

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.index);
  }
});

Latest version use

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.index);
  }
});

回复收藏 0 原文

痴情换悲伤 2024-11-24 08:41:30

您遇到任何错误吗？ select 之后的尾随 , 会破坏某些浏览器中的脚本。

这可以在这个小提琴中看到： http://jsfiddle.net/T7czp/15/

$('#tabs').tabs({
  select: function(event,ui) {
     alert('selected: '+ui.index);
  }
});

Are you getting any errors? The trailing , after your select will break the script in some browsers.

This works as seen in this fiddle: http://jsfiddle.net/T7czp/15/

$('#tabs').tabs({
  select: function(event,ui) {
     alert('selected: '+ui.index);
  }
});

回复收藏 0 原文

美羊羊 2024-11-24 08:41:30

自上次接受的答案以来，jquery UI 似乎略有变化。

activate 函数中定义的 ui 参数现在是一个类似于以下内容的对象：

Object { oldTab={...}, oldPanel={...}, newTab={...}, more...

} index 方法位于其中每个方法中。所以更新后的访问方法是：

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.newTab.index());
  }
});

jquery UI seems to have changed slightly since the last accepted answer.

The ui parameter defined in teh activate function is now an object that looks similar to this:

Object { oldTab={...}, oldPanel={...}, newTab={...}, more...}

The index method is inside each of these. So the updated access method is:

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.newTab.index());
  }
});

回复收藏 0 原文

通知家属抬走 2024-11-24 08:41:30

您需要将事件绑定到选项卡。

$("#tabs").bind("tabsselect", function(e, tab) {
  alert("The tab at index " + tab.index + " was selected");
});

You need to bind the event to the tab.

$("#tabs").bind("tabsselect", function(e, tab) {
  alert("The tab at index " + tab.index + " was selected");
});

回复收藏 0 原文

梦幻的味道 2024-11-24 08:41:30

@Kristofer

你的代码是正确的。

为了选择选项卡，您唯一必须删除的是行：

return false;

因为根据选项卡组件文档< /a>:

请注意，如果 tabsselect 事件的处理程序返回 false，则单击的选项卡将不会被选中（例如，如果切换到下一个选项卡需要表单验证，则很有用）。

（“tabselect”事件对应于“select”处理程序）

@Kristofer

You code is correct.

The only thing you must remove in order to the tab get selected is the line:

return false;

because according with the Tabs component documentation:

Note that if a handler for the tabsselect event returns false, the clicked tab will not become selected (useful for example if switching to the next tab requires a form validation).

(the "tabselect" event corresponds to the "select" handler)

回复收藏 0 原文

~没有更多了~