0
如何为jquery UI选项卡的每个索引绑定一个函数?为每个标签页的jquery ui选项卡函数
例如,我创建了3部分幻灯片注册,第1步是一个表单并进行了验证,我想将代码放在第1步的加载中,同时向选项卡添加类以禁用# 2,#3时,在1,关闭#1和#3时,在#2
如何为jquery UI选项卡的每个索引绑定一个函数?为每个标签页的jquery ui选项卡函数
例如,我创建了3部分幻灯片注册,第1步是一个表单并进行了验证,我想将代码放在第1步的加载中,同时向选项卡添加类以禁用# 2,#3时,在1,关闭#1和#3时,在#2
无需绑定到标签的功能,它内置的插件:
$('#tabs').tabs({
select: function(event, ui) { ... }
});
函数里面可以确定curre NT标签,你是在和你所需要从那里做:
获取当前选项卡索引
currentTabIndex = $('#tabs').tabs('option', 'selected')
获取当前选项卡的内容ID(从HREF) - 有可能是一个更简单的方法,但我还没有找到它。
currentTabContent = $($('.ui-tabs-selected').find('a').attr('href'));
但看到你发布的有关此选项卡/表单您要使用系统中的其他问题,我扔在一起demo here。
HTML
<div id="tabs">
<ul class="nav"> <!-- this part is used to create the tabs for each div using jquery -->
<li class="ui-tabs-selected"><a href="#part-1"><span>One</span></a></li>
<li><a href="#part-2"><span>Two</span></a></li>
<li><a href="#part-3"><span>Three</span></a></li>
</ul>
<div id="part-1">
<form name="myForm" method="post" action="" id="myForm">
<div class="error"></div>
Part 1
<br /><input type="checkbox" /> #1 Check me!
<br />
<br /><input id="submitForm" type="button" disabled="disabled" value="next >>" />
</form>
</div>
<div id="part-2">
<div class="error"></div>
Part 2
<br />Search <input type="text" />
<br />
<br /><input id="donePart2" type="button" value="next >>" />
</div>
<div id="part-3">
<div class="error"></div>
Part 3:
<br />Some other info here
</div>
</div>
脚本
$(document).ready(function(){
// enable Next button when form validates
$('#myForm').change(function(){
if (validate()) {
$('#submitForm').attr('disabled','')
} else {
$('#submitForm').attr('disabled','disabled')
}
})
// enable form next button
$('#submitForm').click(function(){
// enable the disabled tab before you can switch to it, switch, then disable the others.
if (validate()) nxtTab(1,2);
})
// enable part2 next button
$('#donePart2').click(function(){
var okForNext = true; // do whatever checks, return true
if (okForNext) nxtTab(2,1);
})
// Enable tabs
$('#tabs').tabs({ disabled: [1,2], 'selected' : 0 });
})
function validate(){
if ($('#myForm').find(':checkbox').is(':checked')) return true;
return false;
}
function nxtTab(n,o){
// n = next tab, o = other disabled tab (this only works for 3 total tabs)
$('#tabs').data('disabled.tabs',[]).tabs('select',n).data('disabled.tabs',[0,o]);
}