¿Cómo desplazar las pestañas de jQuery ui?

Question

Tengo un div con 600px X 150px y necesito pegar allí unas pestañas jQuery ui. Solo habrá 2 pestañas, pero cada pestaña contendrá una gran cantidad de texto e imágenes, pero no quiero cambiar el tamaño de div. Si inserto la opción de desbordamiento en css en las pestañas div o .ui, aparecerán 2 pergaminos: 1 de div y otro de pestaña, y se desplazará por todo el panel de pestañas. Pregunta: ¿cómo insertar desplazamiento vertical en el contenido de la pestaña?

Gracias de antemano.

Answer 1

Creo que tengo una solución para usted, si entiendo su pregunta correctamente. Aquí está el live example en jsFiddle.

Agregué dos clases, una que se aplica al elemento de pestaña general y otra que se aplica a cada panel de pestañas.

.container{ 
    width: 600px; 
} 
.panel{ 
    height: 150px; 
    overflow: auto; 
} 

(La clase container también posible cambiar el nombre a ui-tabs por lo que se agrega a la ui-tabs clase jQuery UI, y la clase panel posible cambiar el nombre a ui-tabs-panel por lo que se agrega a la ui-tabs-panel clase jQuery UI.)

Aquí está el margen de beneficio que he usado ...

<div class='main'> 
    <div id="tabs" class='container'> 
     <ul> 
      <li><a href="#tabs-1">Tab 1</a></li> 
      <li><a href="#tabs-2">Tab 2</a></li> 
     </ul> 
     <div id="tabs-1" class='panel'> 
      <p>tab1 text...</p> 
     </div> 
     <div id="tabs-2" class='panel'> 
      <p>tab2 text...</p> 
     </div> 
    </div> 
</div> 

Cuando conectar esto con un poco de jQuery UI magia pestaña:

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

Termino con una sola barra de desplazamiento dentro de la pestaña.

Espero que esto ayude!

Answer 2

simplemente use css para la clase ui-tab-content es como agregar el código CSS a cualquier lugar en sus hojas de estilo espero que haya terminado.

.ui-tab-content, .ui-tabs-panel{overflow: auto;} 

Gracias