从小部件内设置扩展jQuery选项卡小部件的活动选项卡

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

使用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>

目标：

要自动设置活动选项卡的第四一个在鼠标悬停（指数3）的标签小部件。

问题：

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

我找到了解决方法，只需使用我想要选择的选项卡的click()方法即可。然而，这不应该被要求 - 这个功能应该直接在小部件中工作。我只是想念一些东西。其他选项在小部件中工作得很好。例如，我可以在鼠标悬停内调用self.options.collapsible=true，它会按预期影响更改。

任何想法？

来源

2016-11-22 kevinmkr

找到解决方案！

您可以从扩展窗口小部件中调用_setOptions（）。

对于我来说，具体代码为：

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

但是，在一般情况下，解决方法是：

this._setOption("active", <zero-based index of tab to activate>);

来源

2016-11-23 12:39:34 kevinmkr

从小部件内设置扩展jQuery选项卡小部件的活动选项卡

回答

相关问题