2010-03-08 3 views
0

** Nevermind. Je l'ai compris. **jQuery accordéon - définit le focus d'entrée pour l'accordéon actif?

Je l'ai fait comme ceci:

$("#accordion").accordion({ 
     header:'h3', 
     active: '#section1', 
     autoheight: false, 
     clearstyle: true, 
}).bind("change.ui-accordion", function(event,ui) { 
    $("#text1").focus(); 
}); 

J'ai un accordéon tout mis en place, et chaque div a une forme en son sein. Je suis juste essayer de comprendre comment mettre l'accent sur un champ d'entrée en fonction de laquelle est ouverte ...

/* accordion */ 
$("#accordion").accordion({ 
     header:'h3', 
     active: '#section1', 
     autoheight: false, 
     clearstyle: true 
}); 

Fondamentalement, je veux placer le curseur dans le premier champ d'entrée pour la section qui est ouvrir. Les formes réelles sont beaucoup plus grandes, donc je condensées énormément ... il

<div id="accordion"> 
     <h3 id="section1"><a href="#">Section 1/a></h3> 
     <div> 
      <form id="form1" action="form.php" method="post"> 
       <fieldset class="inside"> 
        <input type="text" name="text1" id="text1" size="50" value="Default text" /> 
        <input class="open" type="button" value="Submit" name="submit1" /> 
       </fieldset> 
      </form> 
     </div><!--/div--> 

     <h3 id="section2"><a href="#">Section 2</a></h3> 
     <div> 
      <form id="form2" action="form.php" method="post"> 
       <fieldset class="inside"> 
        <input type="text" name="text2" id="text2" size="50" value="Submit" /> 
        <input class="open" type="button" value="Submit" name="submit2" /> 
       </fieldset> 
      </form> 
     </div><!--/div--> 

     <h3 id="section3"><a href="#">Section 3</a></h3> 
     <div> 
      <form id="form3" action="form.php" method="post"> 
       <fieldset class="inside"> 
        <input type="text" name="text3" id="text3" size="50" value="Submit" /> 
        <input class="open" type="button" value="Submit" name="submit3" /> 
       </fieldset> 
      </form> 
     </div><!--/div--> 

Répondre

0
$("#accordion").accordion({ header:'h3', active: '#section1', autoheight: false, clearstyle: true, }).bind("change.ui-accordion", function(event,ui) { $("#text1").focus(); }); 

Cela ne va pas travailler pour les autres sous-Accordion. Comme vous êtes en train de coder en dur l'ID de la zone de texte pour se concentrer.

Il est probablement possible d'accrocher quelque chose sur cet événement change.ui-accordéon mais je ne le connais pas très bien. Vous pouvez utiliser quelque chose comme ceci:

$(document).ready(function() { 
     $("div#accordion > h3 > a").click(function(e) { // when we click a link 

      e.preventDefault(); // prevent the click from bubbling 

      var parenth3 = $(this).parent(); // find the parent h3 the sender is in 

      //this selector then finds the first textbox that is in the div adjacent to the parent h3. 
      $("#" + parenth3[0].id + " + div > form > fieldset.inside > input[type=text]:first").focus(); 

     }); 
    }); 

Cela me semble assez bizarre. Editer: Notez également que votre tag d'ancrage pour la section 1 n'est pas fermé correctement.