2012-02-25 15 views
20

Jquery Mobile ha deciso di considerare i collegamenti di ancoraggio come richieste di ordinamento delle pagine. Tuttavia, questo non va bene se si dispone di un carico di post del blog che hanno collegamenti di ancoraggio alla stessa pagina (es. Href = "# specifiche").Come ottenere i collegamenti di ancoraggio per funzionare in Jquery Mobile?

C'è un modo per disabilitare l'utilizzo del collegamento di ancoraggio di jquery mobile su una pagina specifica che so che non lo userò, così posso utilizzare i link di ancoraggio come previsto, per scendere a una parte della pagina ?

Ho solo bisogno di una soluzione per i link di ancoraggio sulla stessa pagina (es .: href = "# specifiche").

grazie

risposta

42

Si potrebbe provare ad aggiungere un data-ajax="false" sul tag di ancoraggio.

Collegamento senza Ajax

link che puntano ad altri domini o che hanno rel =, data-ajax = "false" o target "esterna" attributi non verrà caricato con l'Ajax. Invece, questi collegamenti causeranno un aggiornamento completo della pagina senza transizione animata . Entrambi gli attributi (rel = "external" e data-ajax = "false") hanno lo stesso effetto, ma un significato semantico diverso: rel = "external" deve essere utilizzato quando si collega a un altro sito o dominio, mentre data- ajax = "false" è utile per semplicemente optare per il caricamento di una pagina all'interno del dominio tramite Ajax. A causa delle restrizioni di sicurezza, il framework sceglie sempre collegamenti a domini esterni al di fuori del comportamento di Ajax .

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

+1

Grazie !!!!!! – capdragon

+0

Penso che tu intenda metterlo sul tag link (al contrario del tag anchor)? –

+0

Questo è anche utile quando si collega a pagine esterne (non collegamenti) nella stessa app mobile jQuery, voglio dire, si ha un link che punta da 'index.html' a' create.html # creations'. Funziona a volte come comandi JQM, ma a volte no, quindi 'data-ajax =" false "' atribute è un'ottima soluzione. – Francisco

2

È possibile aggiungere il seguente codice alla fine della pagina:

<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> 

E aggiungere la classe "nativo-anchor" per il vostro link di ancoraggio.

Non è una soluzione totale, perché il pulsante Indietro del browser ti sposterà alla pagina precedente e non alla posizione del collegamento, ma è meglio che i collegamenti non funzionino affatto.

ho trovato questo sollution qui: jQuery Mobile Anchor Linking

+0

se la pagina è caricata ajax da un'altra pagina (che di solito è il caso in JQuery mobile), assicurati di aggiungere il codice alla fine dell'elemento data-role = "page". –

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

Se siete come me, la conversione di un sito esistente e non si vuole passare attraverso ogni pagina al momento. Puoi aggiungere una riga di codice alla tua intestazione e tutta la tua intestazione e tutti i tuoi link di ancoraggio interni esistenti otterranno il tag data-ajax = "false" aggiunto.

Naturalmente, questo presuppone che tu stia già includendo il tuo file javascript nell'intestazione. Se non lo sei, dovresti comunque toccare ogni pagina. Ma ho un unico file javascript che è incluso in ogni pagina già così ho aggiunto questa linea ...

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

Questo va nel $ (document) .ready blocco(). Se non hai ancora quel blocco, ecco l'intero blocco.

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

Spero che questo aiuti. È la stessa soluzione che offre user700284 ma in modo automatico.

-1

Grazie questa soluzione ha funzionato per me

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

ho sostituito con #index.php che è la mia radice del documento. Ma, non funziona per il tasto di forma cioè input type="submit"

0

Prima di tutto bisogna inserire questo codice in un file custom.js

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

Quindi aggiungere questo file nella tua pagina web prima che i js mobili jQuery è caricato. perché l'evento 'mobilinit' viene attivato immediatamente

Problemi correlati