jqueryui 选项卡（1.9.1）在加载时激活答案

【问题标题】：jqueryui tabs (1.9.1) activate on loadjqueryui 选项卡（1.9.1）在加载时激活
【发布时间】：2013-05-28 04:03:41
【问题描述】：

我有这样的代码：

var enTabs = {
  "Layout": 0,
  "Edit": 1,
  "Stuff": 2
}

$("#tabs").tabs({
    activate: function (event, ui) {
        switch (ui.newTab.index()) {
            case enTabs.Layout:
             // loads remote data, processes it, draws it to this tab;
            break;

            case enTabs.Edit:
             // loads remote data, processes it, draws it to this tab;
            break;

            case enTabs.Stuff:
             // loads remote data, processes it, draws it to this tab;
            break;

        }
    }
}).tabs("option","disabled",[enTabs.Edit,enTabs.Stuff]);
console.log("active tab", $("#tabs").tabs("option","active")); // says "0"

根据 jQuery 的“设计”声明 (http://bugs.jqueryui.com/ticket/8735)，第一次绘制选项卡时不会处理 activate 事件；或者，当您设置 .tabs("option","active",enTabs.Layout) 时，如果当前索引与您设置的选项/活动匹配，则不会触发激活，并且它被初始化为零。

确保在第一次绘制选项卡时，为第一个（第 0 个）选项卡触发“激活”的最佳方法是什么，意识到我不想绑定到“创建”，因为我不想加载选项卡上的数据，直到它们被实际点击？

我做不到

$("#tabs").tabs( "option", "active", -1 ).tabs( "option", "active", enTabs.Layout)

始终如一地工作。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

你可以使用这样的东西

function loadTab(index) {
   switch (index) {
        case enTabs.Layout:
         // loads remote data, processes it, draws it to this tab;
        break;

        case enTabs.Edit:
         // loads remote data, processes it, draws it to this tab;
        break;

        case enTabs.Stuff:
         // loads remote data, processes it, draws it to this tab;
        break;

    } 
}
 $(function () {
      $("#tabs").tabs({
          create: function (event, ui) { loadTab(ui.tab.index()) },
          activate: function (event, ui) { loadTab(ui.newTab.index()) }
      });
 });

这里有一个类似的问题 JQuery UI tabs 1.10.0 activate is not called after creation

【讨论】：

【解决方案2】：

这是在页面加载时触发激活功能的一种方式：

$('#tabs')
    .tabs({
        active: false,
        collapsible: true,
        activate: function(){console.log('Tab activated');}
    })
    .tabs('option', 'active', 0)
    .tabs('option', 'collapsible', false);

说明：

使用选项初始化 JQuery 选项卡

collapsible:true // 需要使用选项 active:false
active:false // 表示没有标签可见（全部折叠）

然后，我们立即激活我们想在页面加载时看到的标签

.tabs('option', 'active', 0) // 此处标签 0 已激活，但可能是其他标签

最后我们删除了可折叠选项（如果你不想要它...）

.tabs('option', 'collapsible', false)

【讨论】：