webentwicklung-frage-antwort-db.com.de

Wie kann man Anchor Links in Jquery Mobile einsetzen?

Jquery Mobile hat beschlossen, Ankerlinks als sortierte Seitenanfragen zu behandeln. Dies ist jedoch nicht sinnvoll, wenn Sie eine Menge Blog-Posts mit Anker-Links auf derselben Seite haben (z. B. href = "# specs").

Gibt es eine Möglichkeit, die Verwendung von Ankerverknüpfungen von Jquery Mobile auf einer bestimmten Seite zu deaktivieren, von der ich weiß, dass sie nicht verwendet wird, sodass ich Ankerverbindungen wie beabsichtigt verwenden kann, um zu einem Teil der Seite zu gelangen?

Ich brauche nur eine Lösung für Ankerlinks auf derselben Seite (dh: href = "# specs").

vielen Dank

22
David

Sie könnten versuchen, dem Ankertag einen data-ajax="false" hinzuzufügen.

Linking ohne Ajax

Verknüpfungen, die auf andere Domänen verweisen oder die rel = "external" haben, data-ajax = "false" oder Zielattribute werden nicht mit Ajax ..__ geladen. Diese Links führen stattdessen zu einer vollständigen Seitenaktualisierung ohne animierte Übergang. Beide Attribute (rel = "external" und data-ajax = "false") haben den gleichen Effekt, jedoch eine andere semantische Bedeutung: rel = "external" sollte beim Linken zu einer anderen Site oder Domäne verwendet werden, während data-ajax = "false" ist hilfreich, wenn Sie einfach eine Seite in Ihrem .__ auswählen möchten. Domain wird über Ajax geladen. Aufgrund von Sicherheitsbeschränkungen kann Das Framework wählt immer Links zu externen Domains aus dem Ajax Verhalten.

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

45
user700284

Wenn Sie wie ich sind, konvertieren Sie eine vorhandene Site, und Sie möchten jetzt nicht jede Seite durchgehen. Sie können Ihrem Header eine Zeile Code hinzufügen. Alle Header und alle vorhandenen internen Anker-Links werden mit dem Tag data-ajax = "false" versehen.

Dies setzt natürlich voraus, dass Sie bereits eine eigene Javascript-Datei in die Kopfzeile einfügen. Wenn Sie es nicht sind, müssten Sie trotzdem jede Seite berühren. Ich habe jedoch eine einzige Javascript-Datei, die bereits auf jeder Seite enthalten ist, also habe ich diese Zeile hinzugefügt ...

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

Dies geht in Ihren $ (document) .ready () -Block. Wenn Sie diesen Block noch nicht haben, ist hier der gesamte Block.

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

Hoffe das hilft. Es ist dieselbe Lösung, die user700284 anbietet, jedoch auf automatisierte Weise.

5

Sie können den folgenden Code am Ende Ihrer Seite hinzufügen:

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

Fügen Sie den Anker-Links die Klasse "native-anchor" hinzu.

Dies ist keine absolute Lösung, da Sie mit der Zurück-Schaltfläche Ihres Browsers zur vorherigen Seite und nicht zur Position des Links gelangen, aber es ist besser als die Links, die überhaupt nicht funktionieren.

Ich habe diese Lösung hier gefunden: jQuery Mobile Anchor Linking

2
Hendrik Jan

Zuerst müssen Sie diesen Code in eine custom.js-Datei einfügen

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

Fügen Sie diese Datei dann Ihrer Webseite hinzu, bevor die jquery mobile js geladen wird. Das Ereignis 'mobilinit' wird sofort ausgelöst

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