1

我有这样的代码：

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)

始终如一地工作。

4

2 回答 2

3

你可以使用这样的东西

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

于 2013-07-03T11:31:24.357 回答
0

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

$('#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)
于 2017-05-30T07:41:12.397 回答