Comment utiliser animate() pour faire glisser (vers la gauche ou vers la droite) le menu de navigation des onglets jQuery?

Question

J'ai un problème. Je voudrais utiliser la fonction animate() pour faire glisser les onglets jQuery du menu de navigation. J'utilise un style de largeur fixe pour le conteneur d'onglets et le no. des onglets est plus que ce qui pourrait être accommodé - d'où les onglets supplémentaires débordent sur la ligne suivante.

Je voudrais mettre deux boutons fléchés aux deux extrémités de la languette. Ainsi, lorsque l'utilisateur clique sur le bouton, le menu de navigation glisse dans la direction correspondante. J'utilise un thème que j'ai fait en utilisant la fonction de rouleau de thème de jQuery UI. Le CSS pour les onglets utilise le positionnement relatif et animate() ne fonctionne que si le positionnement absolu est utilisé. Les onglets pour css jQuery est:

.ui-tabs { padding: .2em; zoom: 1; } 
    .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .1em .1em 0; overflow: hidden;  max-height: 25px; } 
    .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .1em -1px 0; padding: 0; } 
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .2em 0.7em; } 
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; } 
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } 
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ 
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; } 
.ui-tabs .ui-tabs-hide { display: none !important; } 

Alors quelqu'un peut-il s'il vous plaît suggérer Awork autour d'obtenir ce travail correctement?

Answer 1

Ce que je ferais est de mettre vos onglets dans un conteneur qui a une plus grande largeur que c'est conteneur, puis animer ce conteneur, par exemple.

<div id="topContainer" style="width: 800px; overflow: hidden;"> 
    <!-- calculate the width of #animateMe --> 
    <div id="animateMe" style="width: 1250px; position: absolute;"> 
     ... <!-- your tabs here --> 
    </div> 
    ... <!-- tab content here --> 
</div> 

Vous ne pouvez pas être en mesure de le faire avec la fonctionnalité onglets jQuery UI. Editer: Après un peu de déconner, vous devriez pouvoir travailler avec les fonctionnalités des onglets de l'interface utilisateur jQuery.