comment arrêter la page défiler vers le bas tout en utilisant jQuery Accordion

Question

J'utilise jQuery UI accordéon dans mon application, un problème que j'ai est: dans le 2ème onglet, il y a une forme très longue. Chaque fois que l'utilisateur accède au 2ème onglet, la page défile automatiquement vers le bas du formulaire. même après que je code dur et que je mette l'accent sur la première zone de texte du formulaire.

des idées?

vous remercie tous à l'avance

Answer 1

Eh bien, j'ai essayé de poursuivre la mise au point alors que le changement d'index, cependant, au moins, cela ne fonctionne pas pour moi. voici ma solution finale qui est désactiver l'animation dans l'interface utilisateur de l'accordéon:

$("#accordion").accordion(
        { 
         autoHeight: false, 
         animated: false, 
         active: parseInt(index), 
         event: "" 
        } 
); 

Merci pour votre réponse.

Answer 2

Je ne suis pas sûr sans un code si cela fonctionne, mais il y a une change event qui, selon le Doco:

Cet événement est déclenché chaque fois que l'accordéon changements. Si l'accordéon est animé, l'événement sera déclenché à la fin de l'animation; sinon, il est déclenché immédiatement.

Il est donc possible d'utiliser cet événement et de définir le focus sur une cible valide une fois l'expansion terminée.

J'ai testé avec la démo selon /demos/according/default.html et est appelée après la ELARGISSEMENT: Vous

<script type="text/javascript"> 
$(function() { 
    $("#accordion").accordion({ 
     change: function(event, ui) { 
      alert('blah'); 
      // Add your focus code in here 
     } 
    }); 
}); 
</script> 

Je voudrais aussi mentionner dans tous les cas, je l'ai utilisé le accordian la page ne saute pas après l'expansion.

Answer 3

L'effet de défilement de page est un artefact d'activation (automatique ou manuelle) d'une option accordéon.

Le code suivant dans la fonction _toggle du widget ui.accordion (ui la version 1.8.24) fait un appel explicite à la méthode focus:

toShow.prev() 
    .attr({ 
     "aria-expanded": "true", 
     "aria-selected": "true", 
     tabIndex: 0 
    }) 
    .focus(); 

Cette fonction a été supprimée dans la version jQuery UI 1.9.0 vers Octobre 2012.

Pour éliminer l'effet de défilement de la page, supprimez l'appel de méthode .focus() ou effectuez une mise à niveau vers une version plus récente de l'interface utilisateur jQuery (recommandé).