¿Cómo funciona jquery ui tabs?

Question

En http://docs.jquery.com/UI/Tabs#Example hay un breve ejemplo de HTML sobre cómo usar las pestañas JQuery UI.

• Pongo el HTML en un archivo index.htm local.
• Descargué todos los archivos CSS y Javascript, y los guardé en archivos locales:
• pero lo más cercano que puedo obtener es el mismo ejemplo sin ningún color en las pestañas.
• He buscado imágenes, etc. pero no puedo encontrar ninguna.
• Incluso puedo tener todo lo local EXCEPTO el archivo CSS que obtengo de su servidor y ENTONCES funciona, por lo que es algo en el archivo CSS que no obtengo.

¿Qué no estoy copiando localmente que tiene el archivo CSS en línea? ¿Alguien ha obtenido estas pestañas JQuery UI para trabajar y tiene un archivo zip que funciona localmente?

Answer 1

Para que funcionen las pestañas de la IU, NECESITA algunos CSS. La documentación indica el mínimo requerido.

El problema que tiene con el tema de ejemplo es porque el archivo css utilizado hace referencia a otros archivos CSS. Necesita copiarlos todos localmente. También necesita una imagen en la carpeta themes/flora/i.

Answer 2

Si su problema es que parece que todo parece ejecutarse pero los DIV no desaparecen como deberían, entonces probablemente se haya topado con el mismo problema que yo.

Debe definir la clase .ui-tabs-hide para que oculte el elemento. Básicamente jQuery usa esto para ocultar los elementos, en lugar de hacerlo manualmente con la pantalla: ninguno. La razón de esto es para que no altere la configuración predeterminada de su pantalla, que puede ser bloqueada, en línea o cualquier otra cosa. Al agregar y eliminar la clase, le da un mayor control.

.ui-tabs-hide 
{ 
    display: none 
} 

Answer 3

Tuve el mismo problema por lo que estoy aquí y me tomó un tiempo encontrar el problema. Gracias a kgiannakakis respuesta con el CSS que encontré en la página jQueryUI este CSS en el código fuente:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" /> 

Añadir antes de que su CSS principal así por ejemplo:

Y entonces deberías estar bien, me funciona.