jquery-ui - libreria - jquery ui widget

Las pestañas jQuery UI se cargan primero como<ul> y luego como pestañas

Question

Estoy usando jQuery UI y el control de pestañas en una serie de páginas. Parece que, al cargar una página, las pestañas se cargan inicialmente como una lista simple, luego saltan a la tabstrip.

Cuando inicialmente cargo la página obtengo esto:

Luego, después de unos segundos cambia a esto (el camino debe ser):

¿Alguna idea de por qué está pasando esto? ¿Debo cargar los archivos .js y / o .css en un orden particular? O bien, ¿hay alguna forma de ocultar la lista inicial y solo mostrar las pestañas una vez que están ''cargadas''?

Answer 1

Al igual que otros han dicho, es porque jQuery no representa UL como pestañas hasta que el documento se haya cargado. He solucionado este problema simplemente ocultando las pestañas hasta que se carguen. De esa forma te deshaces del parpadeo. Por ejemplo:

<ul id="tabs" style="display: none;">
...
$(document).ready(function(){
$(''#tabs'').tabs();
$(''#tabs'').attr(''display'', ''block'');
});

Answer 2

El problema es que el CSS de jquery-ui es para las clases que el script jquery-ui agrega al DOM cuando la página se ha cargado. En lugar de agregar ui-pestañas al HTML (como lo sugiere gregmac), simplemente podría agregar las mismas reglas de display a su CSS para aplicar a su id de la barra de navegación. Cuando jqueryui agrega las clases a los elementos ul y list, el jqueryui CSS se hace cargo.

Así que agrega esta regla a tu CSS:

#navbarID li {
display: inline;
}

Answer 3

Estaba teniendo el mismo problema. La página donde había definido las pestañas no había importado el jquery-ui css.

Código HTML :

 <div id="tabs">
<ul>
<li>
<a href="connectionDetailsTab1.html?name=<%= jmsConnectionName %>">Summary</a>
</li>
</ul>
</div>

El href del ancla tiene importado el jquery-ui css, por lo que las pestañas se muestran correctamente, después de que se cargan las pestañas. Pero, antes de eso, mostraba un ul sin el estilo específico de tabulación. La corrección era importar el css de jquery-ui en el html anterior también. Versión jquery-ui utilizada: 1.10.2

Answer 4

Esto es normal, pero no debería tomar unos segundos. ¿Cuánto estás haciendo en tu jQuery ready (AKA $() ) función antes de llamar $("#whatever").tabs() ? Intenta mover ese método a la parte superior de tu función de listo.

Answer 5

Esto sucede porque no carga el archivo CSS de jquery ui en el encabezado del documento html, y luego hay un intervalo entre la carga de la página y el CSS aplicado. Debe incluir el css antes del js, por ejemplo:

<link rel="stylesheet" type="text/css" href="resources/jquery/css/smoothness/jquery-ui-1.10.3.custom.min.css"/>
<script type="text/javascript" src="resources/jquery/js/jquery-ui-1.10.3.custom.min.js"></script>

Answer 6

Estoy usando las pestañas jQuery UI con gran éxito. Aquí hay un código que uso:

<div id="tabs">
<ul>
<li><a href="">
<span>Applicant</span></a></li>
<li><a href="">
<span>Insured</span></a></li>
<li><a href="">
<span>Beneficiary</span></a></li>
<li><a href="">
<span>Billing</span></a></li>
<li><a href="">
<span>Summary</span></a></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$tabs = $("#tabs").tabs({
disabled: [1, 2, 3, 4],
event: null,
load: function(event, ui) {
handleload(ui);
},
selected: 0
});
});
</script>

En cuanto al orden, coloco siempre el jquery-ui.css primero, seguido de jquery.min.js y jquery-ui.min.js. Estoy usando las últimas versiones (jQuery 1.3.2 y jQuery 1.7.2), todas servidas desde Google CDN.

Answer 7

Hola, no estoy seguro de si esto es correcto, pero utilicé el siguiente truco. (Intenté otras respuestas, y no están funcionando para mí).

Primero acabo de utilizar el siguiente código para la etiqueta de anclaje:

<div id="tabs">
<ul >
<li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-1" id="link1" ></a></li>
<li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-2" id="link2" ></a></li>
</ul>
</div>

En la función de documento listo escribí el código siguiente (jQuery) para nombrar las etiquetas de anclaje usando:

$("#link1").text(''Current'');
$("#link2").text(''Archived'');

Answer 8

Ocultar el div principal por defecto:

<div id="tabs" style="display: none;">

Luego, al final del documento donde está tu script, simplemente elimina el estilo:

<script>
$("#tabs").removeAttr(''style'');
$("#tabs").tabs();
</script>

Answer 9

Esto sucede porque usted llama a $ (''# id''). Tabs () en document.ready (), que sucede cuando el DOM está listo para ser atravesado ^{[ 1 ]} . En general, esto significa que la página se ha procesado y, por lo tanto, <ul> está visible en la página como <ul> normal sin aplicar ningún estilo específico de pestaña.

No es súper "limpio", pero una forma que uso para evitar esto es agregar la clase ui-tabs a <ul> en el HTML, lo que hace que el estilo CSS se aplique inmediatamente. La desventaja es que no tienes la separación 100% limpia de comportamiento y código, pero lo bueno es que se ve bien.