jquery-ui - Jquery UI 选项卡 : Help getting started with events

Question

我已经阅读了 Jquery UI 选项卡 (1.7) 的文档，并且我相信在单击特定选项卡时发生特定事件方面，我对 Jquery 选项卡有点不知所措。

我可以使用基本选项卡，我只想在选择特定选项卡时将焦点设置在文本框上。

UI 文档声明您通过以下方式处理选择事件:

$('.selector').tabs({
   select: function(event, ui) { ... }
});

我不太清楚上面的意思。我在 stackoverflow 上阅读了一些其他示例，特别是 example 。不幸的是，该演示在提供的答案中不再起作用。

我当前使用 PHP 创建和选择特定选项卡的代码是:

$("#tabs").tabs();
$("#tabs").tabs('option', 'selected', <?php echo $tabID-1; ?>);

效果很好。我想添加以下功能:当选择第四个选项卡时，我将焦点设置到文本框，类似于:

$('#subject').focus(); 

Answer 1

你所做的就是给 $('.selector').tabs() 函数一个关联数组(在 JavaScript 中它被称为对象)。重要的是，JavaScript 正在利用这样一个事实:您可以非常广泛地将函数分配给变量。如果您更容易阅读和理解，您可以尝试以下操作:

var tab_select_function = function(event, ui)
{
    // Objects available in the function context:
    // ui.tab     // anchor element of the selected (clicked) tab
    // ui.panel   // element, that contains the selected/clicked tab contents
    // ui.index   // zero-based index of the selected (clicked) tab
    alert("Tab with index " + ui.index + " clicked!");
};

$('#tabs').tabs({
   select: tab_select_function
});