¿Compartir un elemento entre las pestañas de jQuery UI?

Question

Estoy usando las pestañas de jQuery UI para dividir el contenido en mi página. Tengo una "barra de vínculos" que me gustaría tener colgada en la parte inferior de cada pestaña. (El texto de la pestaña cambiará, pero generalmente navegará por el usuario hacia la izquierda o hacia la derecha mediante pestañas).

Al alojar el div #linkBar dentro de la primera pestaña, se ve 'bien', dentro del borde de Themeroller. Poniéndolo justo fuera de la div 'pestaña padre' coloca los enlaces debajo del borde del tema. Intenté crear un separador espaciador, pero simplemente empuja #linkBar hacia abajo.

Por supuesto, cuando el usuario cambia a otra pestaña, la barra de enlace desaparece. ¿Cómo se organiza la propiedad de los elementos entre pestañas? ¿Debería destruir dinámicamente el #linkBar div en la pestaña que se está navegando y reconstruir en la pestaña que se está navegando? ¿O hay una mejor manera de moverlo entre ellos, o simplemente administrar la visibilidad?

Me gustaría que la barra de enlaces siga el contenido de cada pestaña como pie de página, 'flotante' una o dos líneas debajo del último contenido de cada pestaña (en lugar de tenerla en una posición fija con respecto a la barra de pestañas))

Answer 1

Ok ... Simplemente estaba agregando las clases jQuery UI a la barra de vínculos. Check out my working jsFiddle demo:

moví el linkBar div fuera de la tabOne div y lo puso en la parte inferior de la tabs div:

<div id="container"> 
    <div id="title"> 
     <h1>title bar</h1> 
    </div> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#tabone">one</a></li> 
      <li><a href="#tabtwo">two</a></li> 
      <li><a href="#tabthree">three</a></li> 
     </ul> 
     <div id="tabone"> 
      content goes here 
      <br><br><br><br>more stuff<br><br><br>more stuff<br><br> 
     </div>  
     <div id="tabtwo"> 
      content goes here... 
     </div> 
     <div id="tabthree"> 
      content goes here... 
     </div> 
     <div id="linkBar"> 
      <span id="leftLink"><< left link</span> 
      <span id="rightLink">right link >></span> 
     </div> 
    </div> 
</div> 

que altera ligeramente el estilo linkBar dándole una parte superior e inferior margen así como también ocultarlo por defecto:

#linkBar { 
    display: none; 
    margin: 10px auto; 
} 

Luego simplifico y agregó las clases jQuery UI al $linkBar. Me ligeramente alterado el jQuery sea más legible:

$("#accordion").accordion({ header: "h3" }); 

var $tabs = $("#tabs"), 
    $linkBar = $("#linkBar"); 

$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom"); 
$linkBar.show(); 
$tabs.tabs(); 

$('#title').click(function() { 

    $tabs.tabs('select', 0); 
    return false; 

}); 

Nota: Se podía añadir a la class="ui-tabs-panel ui-widget-content ui-corner-bottom"linkBar div y hacer con ella. Pero, creo que me gusta manejar mejor en el JS.