Question

我已经看过几个如何从小部件外部以编程方式设置活动选项卡的示例。但是，我已经扩展了选项卡小部件，似乎无法以编程方式从小部件中设置活动选项卡。我已经创建了一个小测试用例来演示。

使用Javascript：

$(document).ready(function(){
    $.widget( "custom.extendedTabs", $.ui.tabs, {
        _create: function() {
            var self=this;
            this.element.mouseover(function(){
                console.log(self.options.active);
                self.options.active=3;
                console.log(self.options.active);
            });
            return this._super();
        }
    });

    $(".tabs").each(function(){
        $(this).extendedTabs("option","active",1);
    });
});

HTML：

<div id="tabs1" class="tabs">
  <ul>
    <li><a href="#tabs1_1">HEY1!</a></li>
    <li><a href="#tabs1_2">HEY2!</a></li>
    <li><a href="#tabs1_3">HEY3!</a></li>
    <li><a href="#tabs1_4">HEY4!</a></li>
  </ul>
  <div id="tabs1_1">
    <p>Content 1</p>
  </div>
  <div id="tabs1_2">
    <p>Content 2</p>
  </div>
  <div id="tabs1_3">
    <p>Content 3</p>
  </div>
  <div id="tabs1_4">
    <p>Content 4</p>
  </div>
</div>

目标：

在鼠标悬停选项卡小部件时自动将活动选项卡设置为第4个（索引3）。

问题：

在本演示中，“active”选项在初始化后成功设置（到索引1），焦点按预期跳转到第二个选项卡。但是，在鼠标悬停时，即使将活动选项成功设置为3（通过日志记录验证），该选项卡也不会按预期跳转到第4个选项卡。

我通过简单地使用我想要选中的标签的click()方法找到了解决方法。但是，这不应该是必需的 - 此功能应该直接在窗口小部件中工作。我只是遗漏了一些东西。其他选项在小部件中工作得很好。例如，我可以在鼠标悬停中调用self.options.collapsible=true，它会按预期影响更改。

有什么想法吗？

Answer 1

找到了解决方案！

您可以在扩展小部件中调用_setOptions（）。

对我来说，具体代码是：

git stash

但是，一般来说，解决方案是：

this._setOption("active",this.element.find(">ul>li").length-1);

从窗口小部件中设置扩展jQuery选项卡窗口小部件的活动选项卡

1 个答案: