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 + '">

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

有没有办法做到这一点？

Answer 1

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

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

在#glossary页面中，将id属性添加到链接中匹配data-subpage的sectioin div但不包含哈希#。

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

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

中

var subPage;

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

存储了子页的值后，您需要收听pagecontainershow才能滚动到存储在子网页中的id的div 变量。

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

如果活动页面为glossary并且已定义subPage，请检索该div的.offset().top并使用动画或无动画滚动到该页面。

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

$(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 ^（1）

^（1）在iPhone 5上测试 - Safari Mobile

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

1 个答案: