Pestañas jQuery UI con Siguiente / Anterior | Programar Plus

Las áreas con pestañas son hermosas, pero cuando comienzas a acceder a más de 3 o 4 pestañas diferentes, comienzan a llenarse un poco y tiene sentido proporcionar una navegación alternativa por ellas. Creo que tiene sentido proporcionar botones Siguiente / Anterior ubicados universalmente, por lo que sin siquiera mover el cursor puede hacer clic en cada uno de ellos.

Ver demostración Descargar archivos

La interfaz de usuario de jQuery facilita la creación de áreas con pestañas, por lo que el marco se basa en eso. Pero estamos solos en lo que respecta a los botones Siguiente / Anterior. Afortunadamente, las pestañas de la interfaz de usuario de jQuery tienen una función que se puede llamar para cambiar de pestaña. Podemos vincularlo a enlaces de texto para lograr cambiar de pestaña:

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

Pero queremos hacer esto (con suerte) de la manera más inteligente posible. Entonces queremos:

• Agregue los enlaces dinámicamente a cada panel. Si se agrega o quita un panel, los botones Siguiente / Anterior se ajustan automáticamente al nuevo flujo. Además, los enlaces no estarán allí de forma incómoda con JavaScript desactivado
• Asegúrese de que no haya un botón “Anterior” en el primer panel
• Asegúrese de que no haya ningún botón “Siguiente” en el último panel

Así es como lo hice:

$(function() {

	var $tabs = $('#tabs').tabs();
	
	$(".ui-tabs-panel").each(function(i){
	
	  var totalSize = $(".ui-tabs-panel").size() - 1;
	
	  if (i != totalSize) {
	      next = i + 2;
   		  $(this).append("<a href="https://css-tricks.com/jquery-ui-tabs-with-nextprevious/#" class="next-tab mover" rel="" + next + "">Next Page &#187;</a>");
	  }
	  
	  if (i != 0) {
	      prev = i;
   		  $(this).append("<a href="https://css-tricks.com/jquery-ui-tabs-with-nextprevious/#" class="prev-tab mover" rel="" + prev + "">&#171; Prev Page</a>");
	  }
   		
	});
	
	$('.next-tab, .prev-tab').click(function() { 
           $tabs.tabs('select', $(this).attr("rel"));
           return false;
       });
       

});