Question

Jquery Mobile决定将锚链接视为排序的页面请求。但是，如果您有大量博客帖子具有指向同一页面的锚点链接（即href =“＃specs”），那就不好了。

有没有办法在特定页面上禁用jquery mobile的锚链接使用，我知道我不会在它上面使用它，所以我可以按照预期使用锚链接，下拉到页面的一部分？

我只需要在同一页面上使用锚链接的解决方案（例如：href =“＃specs”）。

感谢

Answer 1

您可以尝试在锚标记上添加data-ajax="false"。

无Ajax链接

指向其他域或具有rel =“external”的链接，   data-ajax =“false”或目标属性不会被Ajax加载。   相反，这些链接将导致整页刷新而没有动画   过渡。两个属性（rel =“external”和data-ajax =“false”）   具有相同的效果，但具有不同的语义含义：rel =“external”   应该在链接到另一个站点或域时使用   data-ajax =“false”对于简单地选择你的页面非常有用   通过Ajax加载域。由于安全限制，   框架总是选择从Ajax中链接到外部域   行为。

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

Answer 2

如果您像我一样，转换现有网站，而您现在不想浏览每个网页。您可以在标题中添加一行代码，所有标题和所有现有内部锚链接都会添加data-ajax =“false”标记。

当然，这假设您已经在标题中包含了自己的javascript文件。如果你不是，你无论如何都要触摸每一页。但是我已经有一个javascript文件已经包含在每个页面中，所以我添加了这一行......

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

这可以在$（document）.ready（）块中找到。如果你还没有那个区块，这就是整个区块。

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

希望这会有所帮助。这是user700284以自动方式提供的相同解决方案。

Answer 3

您可以将以下代码添加到页面末尾：

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

将“native-anchor”类添加到锚链接中。

这不是一个完全的解决方案，因为浏览器的后退按钮会将您移动到上一页而不是链接的位置，但它比不起作用的链接更好。

我在这里找到了这个解决方案：jQuery Mobile Anchor Linking

Answer 4

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

Answer 5

首先，您必须将此代码放入custom.js文件

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

然后在加载jquery mobile js之前将此文件添加到您的网页中。 becuase 'mobilinit'事件立即被触发

Answer 6

谢谢这个解决方案对我有用

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

我将#替换为index.php，这是我的文档根目录。但是，它不适用于表单按钮，即input type="submit"

Answer 7

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

        });

如何让Anchor Links在Jquery Mobile中运行？

7 个答案: