【问题标题】:How to get Anchor Links to work in Jquery Mobile?如何让锚链接在 Jquery Mobile 中工作?
【发布时间】:2012-03-15 19:21:28
【问题描述】:

Jquery Mobile 已决定将锚链接视为排序的页面请求。但是,如果您有大量博客文章具有指向同一页面的锚链接(即 href="#specs"),这并不好。

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

我只需要同一页面上的锚链接的解决方案(即:href="#specs")。

谢谢

【问题讨论】:

    标签: javascript jquery jquery-mobile hyperlink


    【解决方案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

    【讨论】:

    • 我想你的意思是把它放在链接标签上(而不是锚标签)?
    • 这在链接到同一个 jquery 移动应用程序中的外部页面(不是链接)时也很有用,我的意思是,你有一个从 index.html 指向 create.html#creations 的链接。它有时像 JQM 命令一样工作,但有时不能,所以data-ajax="false" 属性是一个很好的解决方案。
    【解决方案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 提供的解决方案相同,但采用自动化方式。

    【讨论】:

      【解决方案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

      【讨论】:

      • 如果页面是从另一个页面通过 ajax 加载的(在 JQuery mobile 中通常是这种情况),请确保将代码添加到 data-role="page" 元素的末尾。
      【解决方案4】:
      $(document).bind("mobileinit", function () {
          $.mobile.ajaxEnabled = false;
      });
      

      【讨论】:

        【解决方案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之前将此文件添加到您的网页中。因为'mobilinit' 事件会立即触发

        【讨论】:

          【解决方案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"

          【讨论】:

            【解决方案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();
                        });
            
                    });
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2012-04-22
              • 1970-01-01
              • 2013-01-24
              • 1970-01-01
              • 2012-08-29
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多