Imprimir divs de jqueryUI tabs

Hace unos días realice una pregunta en mi comunidad predilecta de T!

Link del tema

Después de mucho leer y probar en repetidas ocasiones he conseguido el objetivo deseado:

Requerimientos Previos:

• jquery
• jqueryUI .js y .css

Así que arrancamos con el codigo:



<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery1.7.js"></script>
<script src="js/jquery-ui.js"></script> 

<ul>
            <li><a href="#tabs-datos">Datos</a></li>
            <li><a href="#tabs-1">Silla</a></li>
            <li><a href="#tabs-2">Superficie Trabajo</a></li>
            <li><a href="#tabs-3">Monitor</a></li>
</ul>

 <div id="tabs-datos"> Contenido Datos Personales</div>

 <div id="tabs-1"> Contenido 1</div>

 <div id="tabs-2"> Contenido 2</div>

 <div id="tabs-3"> Contenido 3</div>


<script>

$(function() {
    $( "#tabs" ).tabs();
  });

</script>



Inicialmente llamamos a nuestros frameworks

declaramos un lista desordenada, donde creamos los enlaces a los divs respectivos y ponemos un nombre para visualizar en la pestaña o tab

y finalmente declaramos los divs con su respectivo contenido.

con esto obtenemos algo así: (Nota: Las capturas traen mas tabs y el contenido)



Si intentara imprimir ahora, solo me saldria el div que esta activo al momento de dar la orden.
No se visualiza el contenido de los otros divs, aunque ya tienen información dentro de ellos, para solucionarlo haremos:

Creamos un botón que nos permita generar las tabs en un listado una tras otra, lo cual nos permite imprimir todos los divs.

 

<button class="button" type="button" onClick="printabeTab();">Imprimir</button> 

<script>

function printabeTab(){

        $('#tabs').each(function () {
        
        var tabsforPrint = '';
        
        $(this).find('.ui-tabs-nav li a').each(function () {
        
        tabsforPrint = tabsforPrint + $(this).html();+ '<br />';
        
        var a = $(this).attr('href');
        
        tabsforPrint = tabsforPrint + $(a).html() + '<br />';
        
        });
        
        $(this).html(tabsforPrint);
        

    });
}
    
</script>



Con esto ya se nos generan todas las tabs en una lista, asi:





ahora si control + p y listo!

Nos quedan todas las tabs en un solo documento.