如何在jQuery Mobile中链接到页面的特定部分?
我正在jQM中动态创建一些按钮,如下所示:如何在jQuery Mobile中链接到页面的特定部分?,jquery,html,jquery-mobile,Jquery,Html,Jquery Mobile,我正在jQM中动态创建一些按钮,如下所示: return '<a href="#glossary" id="' + match + '" class="glossaryLink" data-transition="slide">' + match + '</a>'; 但在jQM中,我必须这样做 <a href="#glossary#' + match + '"> 这似乎不起作用。我用#glossary#target创建了一个href,但它不起作用 有
return '<a href="#glossary" id="' + match + '" class="glossaryLink" data-transition="slide">' + match + '</a>';
但在jQM中,我必须这样做
<a href="#glossary#' + match + '">
这似乎不起作用。我用#glossary#target
创建了一个href
,但它不起作用
有没有办法做到这一点 简单的解决方案是向锚点添加一个自定义属性,例如
数据子页面=“#sectionOne”
,并将该值存储在变量中,以便在以后切换到词汇表
页面时检索值
<a href="#glossary" data-subpage="#sectionTwo" class="ui-btn subpage">Section two</a>
使用pagecreate
使用类子页面
绑定锚定上的单击事件。单击后,将数据子页面
值存储在全局变量中
存储子页面的值后,需要收听pagecontainershow
,以便滚动到子页面变量中存储了id
的div
首先需要使用getActivePage
定义活动页面是否为glossary
。另外,检查子页面
变量既不是null
也不是未定义
。否则,页面将正常打开
如果活动页面为glossary
,并且定义了子页面
,则检索该div的.offset().top
,并滚动到该div,可以带动画,也可以不带动画
此外,请注意,您需要setTimeout
来运行滚动功能,以确保页面已完全加载并完成转换
(1)
(1) 在iPhone 5上测试-Safari Mobile这不需要子页面的jQM插件吗?没有更简单的解决方案吗?这与我的其他代码不匹配,因为术语表链接是动态创建的-文本通过一个函数放入,并在与术语表数据库匹配的任何文本周围添加锚。我不想要或不需要滚动动画-只需获取信息即可。@SubjectiveEffect我知道您希望用户访问
词汇表页面中的特定部分,对吗?为什么你需要一个插件,而你可以在一些JS行中实现它?如果你不想要动画,那么就使用$.mobile.silentcroll()
@Omar你不需要一个插件让数据子页面工作吗?如果没有,我会再试一次。我试着用你的代码,但没用。是HTML5,它不需要任何插件。也许你需要调整我的代码以与你的一致。如果您需要进一步的帮助@subjectiveEffect,请告诉我。好的,我已经添加了您的确切代码,它只是像普通链接一样链接到术语表。我不知道为什么它不起作用。
<a href="#glossary" data-subpage="#sectionTwo" class="ui-btn subpage">Section two</a>
<div data-role="page" id="glossary">
<div id="sectionOne">
<p>Section one</p>
</div>
</div>
var subPage;
$(document).on("pagecreate", "#pageID", function () {
$(".subpage").on("click", function () {
subPage = $(this).data("subpage");
});
});
$(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 */
}
});