Question

我正在使用以下函数来更新jQuery ui tabs小部件上的选项卡。

 function updateTheTabs(select, disable) {
    var selectIdx = vehicleSelectorControl.tabIndexByName(select);
    $tabs.tabs('option', 'disabled', [])
        .tabs('option', 'disabled', convertToTabIndices(disable))
        .tabs('option', 'collapsible', true)
        .tabs('select', selectIdx)
        .tabs('option', 'collapsible', false)
        .tabs('select', selectIdx);      
}

我正在切换'可折叠'选项以实现客户端所期望的行为。我还在tabSelect上更新选项卡的内容。我的问题是我只想让第一个tabSelect实际触发对服务器的调用。第二个tabSelect只是为了显示选项卡。我意识到这有点像黑客。页面上的其他控件会影响选项卡状态，在某些情况下，选项卡已被选中，因此第一个调用未更新其内容，因此我将其设为可折叠，选择它（实际上是取消选择它），设置可折叠为false，然后选择选项卡（这会正确触发更新）。无论如何，客户端喜欢当前的行为，除了我可以看到服务器被调用两次。我尝试将链分成两部分并在两者之间设置一个布尔变量，然后在决定更新选项卡时检查它。我没有完全得到我想要的行为。任何人都能指出我在正确的方向吗？同样，如果没有必要，我不想调用服务器。我想要一个不需要更改'updateTheTabs'功能的解决方案。非常感谢任何建议或提示。

干杯，
〜在圣地亚哥

Answer 1

我不确定我得到了你想做什么，但是对于句子“......除了我可以看到服务器被调用两次”之外，我认为你想要缓存选项卡的内容。

启动标签页时，您可以尝试将cache选项设置为true：

$tabs.tabs({cache: true});

Answer 2

使用全局来跟踪选项卡是否已加载可能是最简单的。然后在beforeLoad中，检查选项卡是否已加载。如果没有，请加载它，否则只显示它。在下面的示例代码中，请务必更改“my-tab”以匹配html中的标题，即<a href="whateverurl" title="my-tab">My Tab</a>

var tabLoaded = false;

$("#tabs").tabs({

beforeLoad: function(event, ui) {
  if($(ui.panel).attr('id') == 'my-tab' && tabLoaded) {
    event.preventDefault();
  }

});

jQuery ui选项卡选择所需的帮助。我可以取消行动吗？

2 个答案: