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

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

return '' + match + ''; 

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

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

现在通常你会这样做

但是在jQM中，我必须这样做

这似乎不起作用。 我使用href创建一个href ，它不起作用。

有没有办法做到这一点？

Answer 1

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

 Section two 

在#glossary页面中，将id属性添加到链接中匹配data-subpage subpage的sectioin div但没有hash # 。

 
 
 
Section one
 
  

使用pagecreate将pagecreate上的click事件与class subPage pagecreate 。 单击后，将data-subpage值存储在全局变量中 。

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

一旦你存储了子页面的值，你需要监听pagecontainershow以滚动到存储在subPage变量中的id的div。

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

如果活动页面是glossary并且定义了子页面，则检索.offset().top的div并使用动画或无动画滚动它。

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

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

演示 ^（1）

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