從小部件內設置擴展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選項卡小部件的活動選項卡

回答

相關問題