1

自从我使用 jQuery UI 选项卡以来，这种情况已经发生了很长时间，如http://eq4.net/hive/上所见- 在第一次加载页面时（或为此添加选项卡后）。

单击一次后，会触发 load 和 show 事件，但不会将任何内容加载到面板中，并且当前选择的选项卡索引设置为 -1（无），并且选项卡都脱离了选定状态。

然后，如果您再次单击，一切都会按照您的预期运行，直到您添加一个选项卡。

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

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

4

4 回答 4

0

Confirm the behaviour you report and can only suggest a workaround by which, after a tab is added, the previously selected tab is automatically re-selected twice. The first select will be the buggy ineffective one and the second will actually reselect the tab (and its associated panel).

Something along the following lines maybe :

$(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).
          }
    });
});

It's difficult to see how to handle the special case where no tab has yet been selected (ie. selectedTab === null).

This would be a nasty, inefficient fudge (and not recommended with ajax mode) but would save having to hack the plugin (which, if easily fixable, would have been fixed).

于 2012-06-16T04:50:12.887 回答
0

试着把这个

      $( "#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) {

            },
      });
于 2012-06-16T03:57:10.777 回答
0

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

删除后：

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

选项卡现在按应有的方式加载。我将探索使用 fx 选项时会发生（和不会）发生的确切情况并进行报告。

于 2012-06-16T08:00:58.730 回答
0

由于谷歌的功劳，很明显有几个问题与 jQuery UI 选项卡的.add()方法有关，但是以下过程似乎（不足为奇？）是完全可靠的：

  • 称呼.tabs('destroy')
  • 附加一个新选项卡（即一个新li节点），“手动”
  • 重新初始化.tabs()

从表面上看，这很容易实现，但实际上在开发通用工作代码时需要跳过一些障碍——主要是：

  • 需要保留本机.add()方法在任何索引处插入制表符的能力，而不仅仅是在结尾处
  • 需要跟踪当前选定的选项卡并在重新初始化后重新选择它
  • 需要确保 UI 的全部.tabs()选项仍然可用。

太好了，有机会写一些具有挑战性的东西！

在玩了一段时间的代码之后，我得出的结论是，对于 UI 选项卡插件本身以及之后的补丁，“feeder”（更传统的“适配器”）模式比补丁或猴子补丁更合适（并且更简单）几次迭代我想出了一个轻量级的 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]);or$('selector').trigger("addTab", [url, label, index]);而不是.tabs("add", url, label)or .tabs("add", url, label, index)。

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

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

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

您可以在此处tabsFeeder查看实际操作

缺点

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

“addTab”事件处理程序使用 UI 选项卡插件的select事件来跟踪当前选项卡。为了允许select在选项中指定回调，我选择了一种紧凑的类似观察者的模式，其中触发顺序被硬编码为标准回调（如果存在），然后是插件的defaultSelect()（一个 JavaScript 语句）。虽然这看起来合乎逻辑并且在演示中运行良好，但它没有被充分探索，我不能保证它在所有应用程序中都是正确的。可以允许以编程方式建立顺序（AB 与 BA），但这对编码来说很乏味，而且可能没有必要。

于 2012-06-17T02:56:43.140 回答