Cómo conseguir los Vínculos de Anclaje para trabajar en Jquery Mobile?

Jquery Mobile ha decidido tratar de anclaje de los enlaces de la página de solicitudes de ordenación. Sin embargo, esto no es bueno si usted tiene un montón de entradas de blog que han de anclaje de los enlaces a la misma página (es decir href=»#especificaciones»).

Hay una manera de desactivar jquery mobile ancla el uso de enlaces en una página específica que sé que no voy a usar en para que pueda utilizar el ancla de los enlaces que estaban destinados, a bajar a una parte de la página?

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

gracias

InformationsquelleAutor David | 2012-02-25

7 Kommentare

  1. 45

    Podría intentar agregar un data-ajax="false" en la etiqueta de anclaje.

    Vinculación sin Ajax

    Enlaces que apuntan a otros dominios o que tienen el atributo ,
    data-ajax=»false» o de destino de los atributos no será cargado con Ajax.
    En su lugar, estos vínculos se hará una actualización de la página completa con no animado
    la transición. Ambos atributos ( y data-ajax=»false»)
    tienen el mismo efecto, pero diferente significado semántico:
    debe ser utilizado cuando se enlaza a otro sitio o dominio, mientras que
    data-ajax=»false» es útil para simplemente dejar una página dentro de su
    dominio desde el que se cargan a través de Ajax. Debido a restricciones de seguridad,
    el marco siempre opta enlaces a dominios externos fuera del Ajax
    comportamiento.

    De referencia – http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

    • Creo que te refieres a ponerlo en la etiqueta de enlace (en contraposición a la etiqueta de anclaje)?
    • Esto también es útil cuando se enlaza a páginas externas(no links) en la misma jquery mobile app, quiero decir, tienes un enlace que apunta desde index.html a create.html#creations. Funciona a veces como JQM comandos, pero a veces no, por lo que el data-ajax="false" atributo es una gran solución.
  2. 5

    Si usted es como yo, la conversión de un sitio existente y no quieres ir a través de cada página de la derecha ahora. Usted puede agregar una línea de código a la cabecera y todas las de su cabecera y a todos tus interna de anclaje de los enlaces de los datos-ajax=»false» etiqueta que se añade.

    Por supuesto, esto asume que usted está incluyendo su propio archivo de javascript en la cabecera ya. Si usted no tendría que tocar cada página de todos modos. Pero tengo un solo archivo javascript que se incluye en cada página que ya lo he añadido esta línea…

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

    Esto va en el $(document).ready() de bloque. Si usted no tiene que bloquear, sin embargo, aquí es todo el bloque.

    $(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 user700284 ofertas, pero en una forma automatizada.

  3. 2

    Puede 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 añadir la clase «nativo-ancla» para el anclaje de los enlaces.

    No es un total sollution, debido a que el botón atrás de su navegador de mover a la página anterior y no a la posición del enlace, pero es mejor que los enlaces no funcionan.

    He encontrado este sollution aquí: jQuery Mobile Anclaje de la Vinculación de

    • si la página es ajax carga de una página (que es generalmente el caso en JQuery mobile), a continuación, asegúrese de agregar el código al final de la data-role=»page» elemento.
  4. 0

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

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

    A continuación, agregue este archivo en su página web antes de la js de jquery mobile es cargado. porque 'mobilinit' evento se activa inmediatamente

  5. -1

    Gracias
    esta solución funcionó para mí

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

    He sustituido # con index.php que es mi raíz del documento.
    Pero, no funciona para el botón del formulario me.e input type="submit"

  6. -1
    //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();
                });
    
            });

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea