jquery - efecto - tooltip javascript
¿La pestaña jQuery UI non ajax está cargando todo el sitio web en sí mismo? (7)
Tener un gran problema con jQuery Tabs.
Estoy tratando de cargar las pestañas en la página de productos de mi sitio ... Cuando la página se carga, veo el contenido de las pestañas por un segundo (pestañas html estándar no ajax) y luego, de repente, todo mi sitio web se carga dentro de la pestaña.
Estoy usando el código estándar de la página de demostración de jquery ui tabs.
<div id="productTabs">
<ul>
<li><a href="#tabDescription">Description</a></li>
<li><a href="#tabSpecs">Specifications</a></li>
<li><a href="#tabReviews">Reviews</a></li>
<li><a href="#tabDownloads">Downloads</a></li>
</ul>
<div id="tabDescription">test</div>
<div id="tabSpecs">test</div>
<div id="tabReviews">test</div>
<div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>
<script type="text/javascript">jQuery(document).ready(function(){jQuery("#productTabs").tabs();});</script>
Pero, tengo muchos otros javascript en el sitio, solo me pregunto si alguien ha visto esto antes.
Muchas gracias
Angélica tenía la respuesta que me funcionó. Utilicé esto en un archivo requirejs para cualquier página con las ''pestañas'' de la clase como el selector para las pestañas.
jQuery(".tabs ul li a").each(function() {
jQuery(this).attr("href", location.href.toString()+jQuery(this).attr("href"));
});
jQuery(".tabs").tabs();
Como mencionó @MV, el problema es que jquery confunde la etiqueta base en la parte superior de mi página web. Así que en lugar de editar el archivo jQuery ui que no está en mis opciones, simplemente eliminé la etiqueta base usando jQuery así
<script>
jQuery(function() {
jQuery(''base'').remove();
jQuery( "#tabs" ).tabs();
});
</script>
Esto parece funcionar para mí, ya que no me importa eliminar la etiqueta base temporalmente por el control de pestañas en esa página específica. Pero también estaba pensando en una solución en caso de que se necesiten esas definiciones, como recolectar esas etiquetas base en una matriz, eliminarlas y luego, después de ejecutar el método tabs (), agregarlas nuevamente, lo que parece un poco st ... id pero debería funcionar si tabs () no está implementando ningún patrón de escucha. No lo he probado y no lo haré todavía. De todos modos, ¡parece que jQuery ui tiene un error allí!
De ninguna manera soy programador de JS, más C ++ / C # en Windows, llegó a esta publicación mientras ayudaba a un familiar con su sitio web en Joomla, donde tenía un problema similar, pero gracias a MV link to bug item, la solución es simple. Línea inferior: no puede usar href "local", así que ... no los use, por ejemplo, para la página mypage.html en el servidor http://www.example.com el código en lugar del original:
<div id="productTabs">
<ul>
<li><a href="#tabDescription">Description</a></li>
<li><a href="#tabSpecs">Specifications</a></li>
<li><a href="#tabReviews">Reviews</a></li>
<li><a href="#tabDownloads">Downloads</a></li>
</ul>
<div id="tabDescription">test</div>
<div id="tabSpecs">test</div>
<div id="tabReviews">test</div>
<div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>
Deberías usar:
<div id="productTabs">
<ul>
<li><a href="http://www.example.com/mypage.html#tabDescription">Description</a></li>
<li><a href="http://www.example.com/mypage.html#tabSpecs">Specifications</a></li>
<li><a href="http://www.example.com/mypage.html#tabReviews">Reviews</a></li>
<li><a href="http://www.example.com/mypage.html#tabDownloads">Downloads</a></li>
</ul>
<div id="tabDescription">test</div>
<div id="tabSpecs">test</div>
<div id="tabReviews">test</div>
<div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>
Y todo funcionará bien. Por supuesto, si usa alguna generación de código, como PHP en Joomla, se vuelve aún más fácil de poner, por ejemplo () echo JUri::getInstance() . ''#tab<Name>'' echo JUri::getInstance() . ''#tab<Name>'' en la generación de código
Esta es una solución simple que funciona dentro de su .js, por lo que puede usar una copia de terceros para jquery.ui.
Probado con Jquery UI 1.10.2.
Resuelva el problema de la etiqueta meta de la base y también el problema con la barra diagonal y la dirección URL opcionales.
$("#mytabs UL LI A").each(function() {
$(this).attr("href", location.href.toString()+$(this).attr("href"));
});
$("#mytabs").tabs();
Jugando con el atributo base solo para hacer que las pestañas funcionen. Es demasiado
Otra solución hacky:
element.tabs({
create: function(event, ui){
var tabsData = $(event.target).data(''ui-tabs'');
tabsData.anchors.each(function(idx, anchor){
var contentId = $(anchor).attr(''href'');
var $panel = $(tabsData.panels[idx]);
$panel.html($(contentId).remove().html());
});
},
beforeLoad: function(event, ui){
event.preventDefault();
}
});
probado con jQuery UI - v1.11.1
Mi conclusión
var base=$(''base'').clone(true);
$("#selector").dialog({
open: function( event, ui ) {
$(''base'').remove(); //Delete the Basepath to solve the Problem by loading Content
$(''#tabs'').tabs();//Create the Tabs
}
close: function( event, ui ) {base.insertAfter("head");
});
Tal vez, mira esto, puede ser muy útil eliminar la ruta base, que crear tus pestañas (), y cuando hayas terminado tus trabajos con pestañas, debes adjuntarlas de nuevo a la cabeza.
Tienes razón, es la meta etiqueta BASE. Este es un problema al que te enfrentarás con la última versión de jQuery UI (1.9), funcionó con 1.8. Hubo muchos cambios en la API de pestañas, pero nada pareció causar este problema hasta que verificaste el código fuente de jQuery.
- La etiqueta meta BASE le indica al navegador que transforme el atributo href en las pestañas (que usted usa como referencia para el contenido de las pestañas) de hash + id a una URL completa (usando su valor de etiqueta BASE). Ese es el comportamiento esperado.
- Las versiones anteriores de la IU de pestañas se esforzarían por adivinar si el href era realmente remoto o no, dividiendo el valor de la pestaña href, luego comparándolo con la URL actual Y con la etiqueta BASE, y luego decidir si era realmente local.
- La última versión de jQuery no comprueba el valor de la etiqueta BASE.
- Por lo tanto, la última versión, cuando se usa con la metaetiqueta BASE, intentará cargar el contenido de la pestaña usando Ajax, recargando ellos mismos (o lo que sea que esté en la URL BASE).
Esto es lo que las pestañas jQuery UI usaron en la versión 1.8.24:
this.anchors.each(function( i, a ) {
var href = $( a ).attr( "href" );
// For dynamically created HTML that contains a hash as href IE < 8 expands
// such href to the full page url with hash and then misinterprets tab as ajax.
// Same consideration applies for an added tab with a fragment identifier
// since a[href=#fragment-identifier] does unexpectedly not match.
// Thus normalize href attribute...
var hrefBase = href.split( "#" )[ 0 ],
baseEl;
if ( hrefBase && ( hrefBase === location.toString().split( "#" )[ 0 ] ||
( baseEl = $( "base" )[ 0 ]) && hrefBase === baseEl.href ) ) {
href = a.hash;
a.href = href;
}
Esto es lo que usa JQuery UI Tabs en la versión 1.9.2:
function isLocal( anchor ) {
return anchor.hash.length > 1 &&
anchor.href.replace( rhash, "" ) ===
location.href.replace( rhash, "" )
// support: Safari 5.1
// Safari 5.1 doesn''t encode spaces in window.location
// but it does encode spaces from anchors (#8777)
.replace( //s/g, "%20" );
}
El código se organiza de manera diferente debido a la extensa reescritura del código de pestañas, pero puede obtener la idea ( $ ("base") [0] es el valor de la etiqueta meta BASE).
Hasta ahora no he encontrado ninguna forma de decirle a las pestañas "esto es local, no uses Ajax" usando la API de pestañas normales. Lo que puedo ofrecerle es lo que hice para solucionarlo rápidamente (mientras le pregunto, vuelva a verificar y tal vez complete un informe de error): un truco.
function isLocal( anchor ) {
return anchor.hash.length > 1 &&
( (anchor.href.replace( rhash, "" ) === location.href.replace( rhash, "" ).replace( //s/g, "%20" )) ||
(anchor.href.replace( rhash, "" ) === $( "base" )[ 0 ].href));
}
Esta es la versión más reciente más la comprobación realizada en la versión anterior.
En una copia no minificada de la última interfaz de usuario de jQuery, reemplace la función isLocal con eso. Luego minimice el archivo. Vuelva a colocar la versión original. Prueba.
Me funcionó en Firefox (17.0.1) y Chromium (18.0.1025.168).
La desventaja es que no puede utilizar una copia de terceros (de un CDN). Para mí eso no es un problema ya que la mayoría de mis aplicaciones se utilizan en intranets.
Si alguien encuentra una solución mejor o sabe cómo hacerlo sin hackear el código de la interfaz de usuario de jQuery, háganoslo saber.
ACTUALIZACIÓN: Encontré este informe de error (con varios duplicados): http://bugs.jqueryui.com/ticket/7822 Tuve la tentación de agregar mi propio comentario, pero parece que los desarrolladores de jQuery no "arreglarán" esto como lo consideran El problema está en otra parte. Cita del bugtracker:
No veo cómo esto no es trivial para arreglar ...
Aquí está la implementación trivial y dinámica de PHP: ''http: //''. $ _SERVER [''HTTP_HOST'']. $ _SERVER [''REQUEST_URI'']. ''#foo''.
También es bastante trivial arreglar esto en JavaScript, pero no proporcionaré código de ejemplo porque es el lugar equivocado para corregirlo y debería ser altamente desanimado. El comportamiento de los enlaces está claramente definido y es coherente en todos los navegadores. No hay absolutamente ninguna razón por la que las personas deban usar URL incorrectas y luego piratearlas en JavaScript.
Finalmente, es importante tener en cuenta que "arreglar" esto significaría romper el comportamiento correcto para todos los que lo usan correctamente. Tenga en cuenta que esto se solucionó porque las personas con URL adecuadas se encontraban en el error real que existía en el código antiguo.