在 jQuery Mobile 中如何链接到页面的特定部分？

Question

我正在 jQM 中动态创建一些按钮，如下所示：

return '<a href="#glossary" id="' + match + '" class="glossaryLink" data-transition="slide">' + match + '</a>'; 

这适用于创建按钮 - 它们与按钮上的文本具有相同的 id，并且它们可以很好地链接到词汇表页面。

我需要做的是链接到词汇表页面中的特定地点。

现在通常你会这样做

<a href="glossary.html#' +match+ '"> 

但在 jQM 中我必须这样做

<a href="#glossary#' + match + '">

这似乎不起作用。我用#glossary#target 创建了一个href，但它不起作用。

有没有办法做到这一点？

Answer 1

简单的解决方案，是添加一个自定义属性到 Anchor，例如data-subpage="#sectionOne"，并将该值存储在一个变量中，以便稍后在您更改为glossary 页面时检索该值。

<a href="#glossary" data-subpage="#sectionTwo" class="ui-btn subpage">Section two</a>

在#glossary 页面中，将id 属性添加到与链接中data-subpage 匹配但没有哈希# 的部分div。

<div data-role="page" id="glossary">
  <div id="sectionOne">
    <p>Section one</p>
  </div>
</div>

使用pagecreate 将锚 上的点击事件与subPage 类绑定。单击后，将data-subpage 值存储在全局变量中。

var subPage;

$(document).on("pagecreate", "#pageID", function () {
    $(".subpage").on("click", function () {
        subPage = $(this).data("subpage");
    });
});

一旦您存储了 subpage 的值，您需要收听 pagecontainershow 以便滚动到存储在 subPage 变量中的 id 的 div。

您需要首先使用getActivePage 定义活动页面是否为glossary。另外，检查subPage 变量既不是null 也不是undefined。否则页面会正常打开。

如果活动页面是 glossary 并且定义了 subPage，则检索该 div 的 .offset().top 并滚动到带有动画或不带动画的它。

此外，请注意，您需要 setTimeout 运行滚动功能，以确保页面已完全加载并且 transition 已完成。

$(document).on("pagecontainershow", function () {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
    if ( !! subPage && activePage == "glossary") {
        var scrollTo = $(subPage).offset().top;
        setTimeout(function () {
            /* $.mobile.silentScroll(scrollTo); without animation */
            $("body").animate({
                scrollTop: scrollTo

            }, 500, function () { /* 500ms animation speed - it's up to you */
                subPage = null; /* reset variable */
            });
        }, 300); /* scroll after 300ms - it's up to you */
    }
});

Demo ⁽¹⁾

⁽¹⁾ 在 iPhone 5 上测试 - Safari 移动版