javascript - seccion - ¿Cómo conseguir que los enlaces de ancla funcionen en Jquery Mobile?

cómo se hace un ancla en html

Question

Jquery Mobile ha decidido tratar los enlaces de anclaje como solicitudes de páginas de clasificación. Sin embargo, esto no es bueno si tiene una carga de publicaciones de blog que tienen enlaces de anclaje a la misma página (es decir, href = "# especificaciones").

¿Hay alguna manera de deshabilitar el uso del enlace de anclaje de jquery mobile en una página específica que sé que no lo usaré para poder usar los enlaces de anclaje como estaban destinados, para desplegar una parte de la página?

Solo necesito una solución para los enlaces de anclaje en la misma página (es decir: href = "# especificaciones").

Gracias

Answer 1

Gracias esta solucion funciono para mi

<script>
  $(document).ready(function() {
    $("a").each(function() {
      if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false);
    });
  });
</script>

Reemplacé # con index.php que es mi raíz de documentos. Pero, no funciona para el botón de formulario, es decir, input type="submit"

Answer 2

Primero tienes que colocar este código en un archivo custom.js

$(document).bind(''mobileinit'', function () {
    $.mobile.loader.prototype.options.disabled = true;
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.loadingMessage = false;
});

Luego agregue este archivo en su página web antes de que se cargue el jquery mobile js. ''mobilinit'' evento ''mobilinit'' se activa inmediatamente.

Answer 3

Puedes agregar el siguiente código al final de tu página:

 <script type="text/javascript">
     $(''a.native-anchor'').bind(''click'', function(ev) {
         var target = $( $(this).attr(''href'') ).get(0).offsetTop;
         $.mobile.silentScroll(target);
         return false;
     });
 </script>

Y agregue la clase "ancla nativa" a sus enlaces de ancla.

No es una solución total, porque el botón de retroceso de su navegador lo llevará a la página anterior y no a la posición del enlace, pero es mejor que los enlaces que no funcionan en absoluto.

Encontré esta solución aquí: jQuery Mobile Anchor Linking

Answer 4

Si eres como yo, estás convirtiendo un sitio existente y no quieres ir a todas las páginas ahora mismo. Puede agregar una línea de código a su encabezado y todo su encabezado y todos sus enlaces de anclaje internos existentes obtendrán la etiqueta data-ajax = "false" agregada.

Por supuesto, esto supone que ya está incluyendo su propio archivo javascript en el encabezado. Si no es así, tendrías que tocar todas las páginas de todos modos. Pero tengo un solo archivo javascript que ya está incluido en cada página, así que agregué esta línea ...

$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });

Esto va en su bloque $ (documento) .ready (). Si aún no tienes ese bloque, aquí está el bloque completo.

$(document).ready(function() {
  $("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
});

Espero que esto ayude. Es la misma solución que ofrece el usuario 700284 pero de forma automatizada.

Answer 5

Puede intentar agregar un data-ajax="false" en la etiqueta de anclaje.

Vinculación sin Ajax

Los enlaces que apuntan a otros dominios o que tienen atributos rel = "externos", datos-ajax = "falsos" o de destino no se cargarán con Ajax. En su lugar, estos enlaces provocarán una actualización completa de la página sin una transición animada. Ambos atributos (rel = "external" y data-ajax = "false") tienen el mismo efecto, pero se debe usar un significado semántico diferente: rel = "external" cuando se vincula a otro sitio o dominio, mientras que data-ajax = " false "es útil para simplemente optar que una página dentro de su dominio no se cargue a través de Ajax. Debido a las restricciones de seguridad, el marco siempre opta por los enlaces a dominios externos fuera del comportamiento de Ajax.

Referencia: http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

Answer 6

// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all ''a'' tags
        $(''a[href*="#component"]'').each(function () {
            // then set data-ajax to false, 
            $(this).attr("data-ajax", false);
            // at this point you can add the class to your target a tags. 
            // You can do it elsewhere but because for this example my 
            // ''a'' tags are automatically generated so I just add the class here
            $(this).addClass(''in-pagelink'');
            // then target the class and bind to a click event 
            $(''a.in-pagelink'').bind(''click'', function (ev) {
                // here I redirect the page with window.location.assign
                // as opposed to window.location.href. I find that it works better
                window.location.assign(this.href);
                // then I close my navigation menu
                closeAll();
            });

        });

Answer 7

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});