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