Question

在我第一次加载页面时（或者在添加标签之后）我使用jQuery UI标签时，已经发生了很长时间，如http://eq4.net/hive/所示。

单击一次后，将触发加载和显示事件，但没有内容加载到面板中，并且当前选定的选项卡索引设置为-1（无），并且选项卡全部脱离选定状态。

然后，如果再次点击，一切都会按预期运行，直到您添加标签。

有人能指出我正确的方向，所以我可以开始调试这个怪癖吗？我的代码中没有任何内容可以对选项卡选择产生任何影响，大部分内容都是更新UI的其他方面，这似乎是正确的。

我正在使用jQuery UI 1.8.20和jQuery 1.7.2 - 谢谢

Answer 1

尝试把这个

      $( "#pages" ).tabs().find( ".ui-tabs-nav" ).sortable({ 
              axis: "x",   sort: function(event, ui) {
                        },

Document.Ready

中的

      $(document).ready(function () {
            $( "#pages" ).tabs().find( ".ui-tabs-nav" ).sortable({
                axis: "x",
                sort: function(event, ui) {

            },
      });

Answer 2

确认您报告的行为，并且只能建议一种解决方法，在添加标签后，将自动重新选择两次以前选择的标签。第一个选择将是错误无效的选项，第二个将实际重新选择选项卡（及其相关的面板）。

以下几行可能是：

$(function(){

    ...

    var selectedTab = null;

    $(selector).tabs({
          ...
          select: function(event, ui) {
              //Keep `selectedTab` up to date to remember the selected tab
              selectedTab = ui.tab; //or ui.index?
          }
          add: function(event, ui) {
               //Here re-select selectedTab twice (if not null).
               //Probably easier to use selectedTab.trigger('click') than the tabs' .select() method, (which requires the selector to be known).
          }
    });
});

很难看出如何处理尚未选择标签的特殊情况（即selectedTab === null）。

这将是一个讨厌的，效率低下的软糖（并不建议使用ajax模式），但可以节省不得不破解插件（如果容易修复，将会被修复）。

Answer 3

原来是导致这种行为的fx选项，我冒昧地猜测事件起泡器没有冒泡。

删除后

：

fx: {
     opacity: 'toggle',
    duration: 100
}

标签现在按预期加载。我将详细探讨使用fx选项并报告时会发生什么（和不会发生）。

Answer 4

有了Google的信誉，显然有几个问题与jQuery UI标签.add()方法有关，但是以下过程似乎（不出所料？）是完全可靠的：

致电.tabs('destroy')
附加一个新标签（即一个新的li节点），“手动”
重新初始化.tabs()

从表面上看，这很容易实现，但在实践中，在开发通用工作代码时会有一些窍门 - 主要是：

需要保留原生.add()方法在任何索引处插入制表符的能力，而不仅仅是在最后
需要保持对当前所选标签的跟踪，并在重新初始化后重新选择它
需要确保所有用户界面的.tabs()选项仍然可用。

很棒，有机会写出具有挑战性的东西！

在玩了一段时间之后，我得出的结论是“馈送器”（更常规的是“适配器”）模式比UI选项卡插件的补丁或猴子补丁更合适（也更简单）本身，经过几次迭代，我想出了一个轻量级的jQuery插件来完成这项工作：

$.fn['tabsFeeder'] = function(options) {
    this.on('addTab', function(event, url, label, index) {
        var $that = $(this),
            s = $that.data('tabs').options;
        $that.tabs('destroy');
        try {
            var $lis = $that.find('li'),
                n = $lis.length;
            index = Math.max((index === undefined) ? n : index, 0);
            $lis.eq(Math.min(index, n - 1))[(index < n) ? 'before' : 'after']('<li><a href="' + url + '">' + label + '</a></li>');
            if (s.selected !== undefined && index <= s.selected) {
                s.selected += 1;
            }
            throw ('');
        }
        catch (e) {
            $that.tabs(s);
        }
    });

    this.on('current', function(event, callback) {
        $that = $(this);
        if ($that.eq(0).length > 0 && typeof callback === 'function') {
            var ui = {
                'tab': $that.find('li.ui-state-active a'),
                'panel': $that.find('.ui-tabs-panel').not('.ui-tabs-hide'),
                'index': $that.tabs('option', 'selected')
            };
            callback(event, ui);
        }
    });
    this.tabs(options);
};

相信我，它很轻。

有了这个插件（以及jQuery UI标签），我们现在可以找到底线：

使用$('selector').tabsFeeder(options)初始化标签，其中options是标准的jQuery UI标签选项 - 无添加且无遗漏
致电$('selector').trigger("addTab", [url, label]);或$('selector').trigger("addTab", [url, label, index]);而非.tabs("add", url, label)或.tabs("add", url, label, index)。

为了更好的衡量，我添加了一个current自定义事件来访问当前选定的选项卡（根据标签本机事件将其作为“ui”对象传递给回调函数）。

我不确定我是否可以完全证明使用自定义事件处理程序而不是正确的方法，除了说插件：

更容易编写
更简洁
不需要将任何自己的数据写入DOM。
保证方法链接

您可以在here

中看到tabsFeeder

<强>缺点

由于tabsFeeder依赖于重新初始化.tabs()，因此效率低且可能不适合与ajax模式一起使用，因为内容可能需要重新获取 - 但无论如何都要尝试 - 性能可能是可以接受的。

“addTab”事件处理程序使用UI标签插件的select事件来跟踪当前标签。为了允许在选项中指定select回调，我选择了一个紧凑的类似观察者的模式，其中触发顺序被硬编码为标准回调（如果存在），后跟插件的{{1 （一个JavaScript语句）。虽然这似乎是合乎逻辑的，并且在演示中运行良好，但尚未完全探索，我不能保证它在所有应用程序中都是正确的。可以允许以编程方式建立订单（A-B与B-A），但这对于编码来说是繁琐的，可能不是必需的。

选项卡无法进入选定状态，直到被点击两次（第一次）

4 个答案: