JQuery Scrolling/Paging Tabs

Question

Estoy tratando de crear una barra de pestañas simple para un sitio que tiene la capacidad de desplazarse por pestañas que no caben en la página. Esto es bastante simple y no necesita tener ningún ajax ni contenido cargado dinámicamente ... simplemente muestra todas las pestañas, y cuando haces clic en una, te lleva a otra página.

he recorrido el Internet y parece que no puede encontrar otra cosa que: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html sin embargo, esto es muy pesado y complicado ... Busco un ejemplo de peso ligero en jQuery. Si alguien puede ayudar, ¡le estaría agradecido!

Answer 1

terminé escribiendo yo mismo con un div que está desbordamiento está configurado como oculto. Luego usó el jquery a continuación para mover las pestañas en el div.

$(document).ready(function() 
    { 
     $('.scrollButtons .left').click(function() 
     { 
     var content = $(".tabs .scrollable .content") 
     var pos = content.position().left + 250; 
     if (pos >= 0) 
     { 
      pos = 0; 
     } 
     content.animate({ left: pos }, 1000); 
     }); 
     $('.scrollButtons .right').click(function() 
     { 
     var content = $(".tabs .scrollable .content") 
     var width = content.children('ul').width(); 
     var pos = content.position().left - 250; 
     //var width = content.width(); 
     if (pos <= (width * -1) + 670) 
     { 
      pos = (width * -1) + 600; 
     } 
     content.animate({ left: pos }, 1000); 
     }); 
    }); 

Mi HTML era la siguiente:

<div class="tabs"> 
    <div class="scrollable"> 
     <div class="content"> 
      <ul> 
       <li>Tab1</li> 
       <li>Tab2</li> 
       <li>Tab3</li> 
       <li>Tab4</li> 
       <li>Tab5</li>      
       </ul> 
     </div> 
    </div> 
    <div class="scrollButtons"> 
     <ul> 
      <li> 
       <div class="left"> 
       </div> 
      </li> 
      <li> 
       <div class="right"> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

¿Podría simplemente envolver las pestañas en un DIV con overflow-x: establecer automáticamente en el CSS?

Answer 3

Siempre uso JQuery UI tabs como punto de partida para las pestañas. Puede personalizar la descarga de JQuery UI en la sección de descargas del sitio web. Este método debe ser más ligero que cualquier otra implementación, si ya está utilizando JQuery en su sitio web.

Fuera de la caja, las pestañas JQuery UI no le darán el desplazamiento que desea. Esto creo que se puede lograr alterando el CSS, pero lo más probable es que sea más fácil si modifica la navegación de su sitio (es decir, crea más niveles, usa títulos más cortos).

Esperanza esto ayuda

Answer 4

Acabo de crear un plugin a mí mismo: Inicio Proyecto: http://jquery.aamirafridi.com/jst