如何在同一页内使用HTML5，JQuery手机中的链接进行内部浏览？ [英] How to navigate internally within same Page using links in HTML5, JQuery mobile..?
问题描述
我有一个场景，其中我想使用链接在我的Android应用程序的页面内导航。我使用 HTML5 与 Phonegap 和JQuery Mobile。
例如，我有：
< h3& < a name =try/> Header2< / h3>
< a href =＃try>导航到Header2< / a>
为了导航到同一页面中的页眉部分，我无法这样做。有人可以为这个问题提供一些解决方案吗？
作为由@Adleer给出的解决方案的一部分，试图处理同一个HTML文档的多个部分。下面是一个示例代码供参考：
< body&
< div data-role =pageid =page3>
< div data-role =header>
< h3>公共双方< / h3>< / div>< / div>
< div data-role =pageid =diphthongs>
< div data-role =content>
< ul>
< li>测试< / li>
< li> item2< / li>
< / ul>
< / div>< / div>
< div data-role =pageid =vowels>
< div data-role =content>
< ul>
< li>< a href =＃diphthongs>链接到Diphthongs< / a> < / li>
< li>< a href =＃page3>指向第3页的链接< / a> < / li> < / li>
< / ul>
< / div>< / div>
< / body>
上述代码用于提供的解决方案之一。
在你添加的最后一个jsfiddle中，你在选择器和HTML属性中有一些错误。您可以使用具有唯一标识符的 id attribue，以及选择器 $（'＃Anyname'） - 区分大小写
或者，使用 name 属性与unqiue标识符，以及选择器 $（'[name = Somename]'） - 区分大小写（心智大写/小写字母） - 访问该元素的属性。
要向下滚动到任何元素，jQuery Mobile都有自己的滚动函数 .silentScroll（）。请注意， $。mobile.silentScroll（）没有动画，与 .animate（{scrollTop：value}，animation-speed）。
$ '）.on（'click'，function（）{
var position = $ .mobile.activePage.find（'＃vowels2'）。get（0）.offsetTop;
$ .mobile.silentScroll （position）;
}）;
其中 .get（0）.offsetTop 是目标元素的 y 轴位置值， $。mobile.activePage 是活动/当前页面/视口。
I have a scenario, wherein I am trying to navigate within page of my Android App using links. I am using HTML5 with Phonegap and JQuery Mobile.
For ex, I am having:
<h3><a name="try"/> Header2 </h3>
and when I give,
<a href="#try"> Navigate to Header2 </a>
in order to navigate to the Header section within the same page, I am unable to do so. Can someone please provide some solution for this problem..?
As part of solution given by @Adleer, tried working with for multiple sections of the same HTML document. Below is a sample code for reference:
<body>
<div data-role="page" id="page3">
<div data-role="header">
<h3>Common diphthongs</h3></div></div>
<div data-role="page" id="diphthongs">
<div data-role="content">
<ul>
<li> Test </li>
<li> item2 </li>
</ul>
</div></div>
<div data-role="page" id="vowels">
<div data-role="content">
<ul>
<li><a href="#diphthongs"> Link to Diphthongs </a> </li>
<li><a href="#page3"> Link to page3 </a> </li> </li>
</ul>
</div></div>
</body>
The above code is for reference to one of the provided solutions.
In the last jsfiddle you added, you had some mistakes in selectors and HTML attributes. You either use id attribue with a unique identifier, and selector $('#Anyname') - case sensitive (mind capital/small letters) - to access properties of that element.
Or, use name attribute with a unqiue identifier, and selector $('[name=Somename]') - case sensitive (mind capital/small letters) - to access properties of that element.
To scroll down to any element, jQuery Mobile has its' own scroll function .silentScroll(). Note that $.mobile.silentScroll() has no animation, unlike .animate({ scrollTop: value }, animation-speed).
$('selector').on('click', function () {
var position = $.mobile.activePage.find('#vowels2').get(0).offsetTop;
$.mobile.silentScroll(position);
});
Where .get(0).offsetTop is the y axis position value of the target element, and $.mobile.activePage is the active/current page/viewport.
这篇关于如何在同一页内使用HTML5，JQuery手机中的链接进行内部浏览？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
