Fonctions des onglets jquery ui pour chaque onglet

Question

Comment lier une fonction pour chaque index des onglets de l'interface utilisateur de jquery? Par exemple, je crée une diapositive en 3 parties, l'étape 1 est un formulaire et a une validation, je veux placer le code pour cela dans la charge de l'étape 1, tout en ajoutant des classes aux onglets pour désactiver # 2 et 3 lorsque sur 1, désactivez # 1 et # 3 lorsque le # 2

Answer 1

il n'y a pas besoin de lier une fonction aux onglets, il est intégré dans le plug-in:

de l'plugin page:

$('#tabs').tabs({ 
    select: function(event, ui) { ... } 
}); 

A l'intérieur de la fonction, vous pouvez déterminer le curre onglet nt vous êtes et faites ce que vous devez faire à partir de là:

• Récupère l'index de l'onglet en cours

  currentTabIndex = $('#tabs').tabs('option', 'selected') 
  

• Obtenez l'ID de contenu onglet (de href) - il pourrait y avoir un manière plus facile, mais je ne l'ai pas encore trouvé.

  currentTabContent = $($('.ui-tabs-selected').find('a').attr('href')); 
  

mais de voir les autres questions à propos de ce système posté onglet/formulaire que vous essayez d'utiliser, je l'ai jeté ensemble un 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> 

Script

$(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]); 
}