2016-11-22 7 views
0

ウィジェットの外からプログラムでアクティブなタブを設定する方法の例をいくつか見てきました。しかし、私はタブウィジェットを拡張しており、アクティブなタブをプログラムでから内に設定することはできません。デモするための小さなテストケースを作成しました。拡張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> 

目標:

が自動的に第四1にアクティブなタブを設定するには、マウスオーバーで(インデックス3)タブウィジェットの

問題:このデモで

、「アクティブ」オプションが正常に右(指標1)は、初期化後に設定されており、期待通りの焦点は第二のタブにジャンプします。ただし、マウスオーバーでは、アクティブなオプションが3に正常に設定されていても(ログによって確認されたように)、タブは期待通りに4番目のタブにジャンプしません。

私が選択したいタブのclick()メソッドを使用するだけで回避策が見つかりました。ただし、これは必須ではありません。この機能はウィジェット内で直接動作するはずです。私は何かが欠けているだけです。他のオプションはウィジェット内でうまく動作します。たとえば、マウスオーバー内でself.options.collapsible=trueと呼ぶことができ、予想通り変更に影響します。

アイデア?

答えて

0

解決策を見つけました!

拡張ウィジェット内から_setOptions()を呼び出すことができます。私にとって

、具体的なコードは次のとおりです。

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

しかし、一般的には、解決策は以下のとおりです。

this._setOption("active", <zero-based index of tab to activate>); 
関連する問題