web-dev-qa-db-fra.com

Comment faire en sorte que Anchor Links fonctionne dans Jquery Mobile?

Jquery Mobile a décidé de traiter les liens d'ancrage comme des demandes de page de tri. Toutefois, cela n’est pas utile si vous avez une série d’articles de blog contenant des liens d'ancrage vers la même page (c.-à-d. Href = "# specs").

Existe-t-il un moyen de désactiver l'utilisation du lien d'ancrage de jquery mobile sur une page spécifique sur laquelle je sais que je ne l'utiliserai pas afin de pouvoir utiliser les liens d'ancrage tels qu'ils étaient censés, pour accéder à une partie de la page?

Je n'ai besoin que d'une solution pour les liens d'ancrage sur la même page (par exemple: href = "# specs").

merci

javascriptjqueryjquery-mobilehyperlink
22
David

Vous pouvez essayer d'ajouter un data-ajax="false" sur la balise d'ancrage.

Liaison sans Ajax

Liens qui pointent vers d'autres domaines ou qui ont rel = "external", data-ajax = "false" ou les attributs de cible ne seront pas chargés avec Ajax . Au lieu de cela, ces liens provoqueront un rafraîchissement complet de la page sans animation transition. Les deux attributs (rel = "external" et data-ajax = "false") ont le même effet, mais une signification sémantique différente: rel = "external" doit être utilisé pour créer un lien vers un autre site ou domaine, alors que data-ajax = "false" est utile pour simplement opter pour une page dans votre domaine d'être chargé via Ajax. En raison de restrictions de sécurité, le cadre opte toujours pour des liens vers des domaines externes en dehors de Ajax comportement.

Référence - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

45
user700284

Si vous êtes comme moi, convertissez un site existant et ne souhaitez pas parcourir toutes les pages pour le moment. Vous pouvez ajouter une ligne de code à votre en-tête et à l'ensemble de votre en-tête et de tous vos liens d'ancrage internes existants. La balise data-ajax = "false" est ajoutée.

Bien entendu, cela suppose que vous incluez déjà votre propre fichier javascript dans l'en-tête. Si vous ne l'êtes pas, vous devrez quand même toucher chaque page. Mais j'ai un seul fichier javascript qui est déjà inclus dans chaque page alors j'ai ajouté cette ligne ...

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

Cela va dans votre bloc $ (document) .ready (). Si vous n'avez pas encore ce bloc, voici le bloc entier.

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

J'espère que cela t'aides. C'est la même solution que propose user700284 mais de manière automatisée.

5
Glenn J. Schworak

Vous pouvez ajouter le code suivant à la fin de votre page:

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

Et ajoutez la classe "native-anchor" à vos liens d'ancrage.

Ce n'est pas une sollicitation totale, car le bouton précédent de votre navigateur vous amènera à la page précédente et non à la position du lien, mais c'est mieux que les liens ne fonctionnent pas du tout.

J'ai trouvé cette solution ici: jQuery Mobile Anchor Linking

2
Hendrik Jan

D'abord, vous devez placer ce code dans un fichier custom.js

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

Ajoutez ensuite ce fichier sur votre page Web avant le chargement de jquery mobile js. car l'événement 'mobilinit' est déclenché immédiatement

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