从小部件内设置扩展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
,它会按预期影响更改。
任何想法?
答
找到解决方案!
您可以从扩展窗口小部件中调用_setOptions()。
对于我来说,具体代码为:
this._setOption("active",this.element.find(">ul>li").length-1);
但是,在一般情况下,解决方法是:
this._setOption("active", <zero-based index of tab to activate>);