jQuery UI tabs chargement d'abord en tant que <ul> ensuite sous forme d'onglets

Je suis à l'aide de jQuery UI et le contrôle onglet sur une série de pages.
Il semble que, lors du chargement d'une page, les onglets d'abord charger une simple liste, puis ils sautent pour le contrôle tabstrip.

Quand j'ai d'abord charger la page j'obtiens ceci:
jQuery UI tabs chargement d'abord en tant que <ul> ensuite sous forme d'onglets

Puis, après quelques secondes, elle passe à présent (le chemin doit être):
jQuery UI tabs chargement d'abord en tant que <ul> ensuite sous forme d'onglets

Une idée de pourquoi ce qui se passe? Ai-je besoin de charger le .js et/ou .les fichiers css dans un ordre particulier? Ou, est-il un moyen de masquer la liste initiale et de n'afficher que les onglets une fois qu'ils sont "chargé"?

InformationsquelleAutor Jason | 2009-10-02
  1. 24

    Cela se produit parce que vous appelez $('#id').les onglets() dans le document.ready(), ce qui se produit lorsque le DOM est prêt à être traversés[Un]. En général, cela signifie que la page a été rendu, et donc la <ul> est visible sur la page en tant que régulier <ul> sans aucun onglet spécifique style appliqué.

    C'est pas super "propre", mais un moyen que j'utilise pour contourner ce problème consiste à ajouter le ui-tabs classe à la <ul> dans le code HTML, ce qui provoque pour obtenir le style CSS appliqué immédiatement. L'inconvénient est que vous n'avez pas 100% propre séparation du code et du comportement, mais l'avantage est qu'il a l'air sympa.

    • Je suis juste en utilisant $(function() { $("#tabstrip").les onglets({ }); $("#insiteTABs").les onglets( 'select' , 1 ) }); Doit-je faire quelque chose de différent?
    • Non, il suffit d'ajouter les classes: <div class="ui-tabs"><ul class="ui-tabs-nav">, et potentiellement de l'interface utilisateur-les widgets* les classes - il est préférable d'utiliser firebug et inspecter l'élément après son rendu, et ajouter toutes les classes de votre code HTML.
    • Merci...je suis aller dans cette direction.
    • Juste pour ajouter une autre suggestion. Vous pouvez également définir les onglets contenant display:none(ou visibility:hidden dans certains cas) et puis il visible lorsque les onglets jQuery appel est terminé. Cependant, gardez à l'esprit que pour ralentir le chargement des pages les onglets ne seront pas utilisables jusqu'à ce que la page a fini de charger.
    • +1 C'est très intelligent et facile à mettre en œuvre la solution. Remarque,je suis en utilisant le "jquery-ui-1.8.24" version et j'ai besoin d'ajouter un peu plus de classes.
    • c'est super intelligent.

    InformationsquelleAutor gregmac
  2. 23

    Comme d'autres l'ont dit, c'est parce que jQuery ne rend pas le UL sous forme d'onglets jusqu'à ce que le document est chargé. J'ai contourné ce problème simplement en cachant les pattes jusqu'à ce qu'ils sont chargés. De cette façon, vous vous débarrasser de la lueur. Par exemple:

    <ul id="tabs" style="display: none;">
...
$(document).ready(function(){
  $('#tabs').tabs();
  $('#tabs').attr('display', 'block');
});
    • Merci man, u sauvé mon temps.. Mais j'ai besoin de changer un seul endroit, $(document).ready(function(){ $('#tabs').les onglets(); $('#tabs').css('display', 'block'); });
    • pour ce..
    • Bonne idée. Léger ajustement - mettre le #onglets {display:none} dans le CSS, et d'utiliser $("#onglets").les onglets().show();
    • cela m'a aidé acclamations.
    • Cela est d'or.... thankn vous
    InformationsquelleAutor James Skidmore
  3. 1

    C'est normal, mais il ne devrait pas prendre quelques secondes. Combien êtes-vous en train de faire dans votre jQuery prêt (AKA $()) fonction avant d'appeler $("#whatever").tabs()? Essayez de déplacer cet appel de méthode au début de votre prêt de la fonction.

    • Maintenant que j'ai vraiment le regarder et de l'heure c'est plus de 1 seconde ou plus (il semble juste plus long) - peut-être que je ne devrais pas être concerné...?
    • Si cela vous dérange, vous pouvez faire ce que James Skidmore suggère de le cacher, mais vous aurez encore à traiter avec elle, soudainement apparaître.
    InformationsquelleAutor Mark A. Nicolosi
  4. 1

    Hé, je ne suis pas sûr de savoir si c'est la bonne façon mais j'ai utilisé la suite de hack. (J'ai essayé d'autres réponses, et ils ne travaillent pas pour moi).

    Début, j'ai utilisé le code suivant pour la balise d'ancrage:

    <div id="tabs">
    <ul >
        <li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-1" id="link1" ></a></li>
        <li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-2" id="link2" ></a></li>
    </ul>
</div>

    Dans le Document prêt de fonction, j'ai écrit la suite (jQuery) code nom de l'Ancre des balises à l'aide:

    $("#link1").text('Current');
$("#link2").text('Archived');
    • Merci !! - Pour tous ceux qui font face à des problèmes avec IE , besoin de ce style="list-style-image: none !important; list-style-type: none"
    InformationsquelleAutor Srikanth
  5. 1

    Masquer la principale div par défaut:

    <div id="tabs" style="display: none;">

    Puis en fin de document dans le cas où votre script, il suffit de retirer le style: 

    <script>
    $("#tabs").removeAttr('style');
    $("#tabs").tabs();   
</script>
    InformationsquelleAutor Pavel Aslanov
  6. 1

    La solution qui a fonctionné pour moi a été de définir le display propriété de style à none pour la div élément qui contient les onglets, puis d'appeler la show() méthode après la tabs() méthode.

    <script>
  $( function() {
    $( "#tabs" ).tabs();
    $( "#tabs" ).show();
  } );
</script>

<div class="tabbody" id="tabs" style="display: none;">
    <!-- tab html -->
</div>
    InformationsquelleAutor 5280Angel
  7. 0

    J'ai eu le même problème. La page où j'avais défini les onglets avait manqué de l'importation du jquery-ui css.

    Code Html :

     <div id="tabs">
    <ul>
        <li>
             <a href="connectionDetailsTab1.html?name=<%=  jmsConnectionName %>">Summary</a>

         </li>
    </ul>
 </div>

    L'ancre href jquery-ui css importés, en raison de laquelle les onglets ont été à apparaître correctement, après les onglets chargés. Mais , avant cela, il a été montré une ul sans l'onglet style. Correctif a été d'importer jquery-ui css dans le html ci-dessus aussi. jquery-ui version utilisée : 1.10.2

    InformationsquelleAutor Binita Bharati
  8. -1

    Je suis en utilisant jQuery UI tabs avec un grand succès. Voici un code que j'utilise:

    <div id="tabs">
    <ul>
        <li><a href="">
            <span>Applicant</span></a></li>
        <li><a href="">
            <span>Insured</span></a></li>
        <li><a href="">
            <span>Beneficiary</span></a></li>
        <li><a href="">
            <span>Billing</span></a></li>
        <li><a href="">
            <span>Summary</span></a></li>
    </ul>
</div>
<script type="text/javascript">

    $(function() {
        $tabs = $("#tabs").tabs({
            disabled: [1, 2, 3, 4],
            event: null,
            load: function(event, ui) {
                handleload(ui);
            },
            selected: 0
        });
    });

</script>

    Que pour la commande j'ai toujours lieu à jquery ui.css en premier, suivi par jquery.min.js et jquery-ui.min.js. J'utilise les dernières versions (jQuery 1.3.2 et jQuery 1.7.2) le tout servi dans Google CDN.

    • C'est l'ordre, je suis en cours d'exécution-le maintenant...merci
    InformationsquelleAutor Rudy
  9. -1

    Le problème est que le css de jquery-ui est pour les classes de jquery-ui script ajouter au DOM lorsque la page est chargée. Plutôt que d'ajouter ui-tabs au format HTML (comme suggéré par gregmac), il vous suffit d'ajouter le même display règles CSS à appliquer à votre barre de navigation id. Lorsque jqueryui ajoute les classes de la ul et les éléments de la liste, le jqueryui CSS prend le dessus.

    Donc ajouter cette règle css:

    #navbarID li {
    display: inline;
}
    • J'aime les résultats de ce changement, sauf qu'il fait tout <li> à l'intérieur de l'onglet conteneur affichage inline ainsi... je pourrais avoir de solution de contournement...
    InformationsquelleAutor Anthony