jQuery移动选项卡和锚点 [英] jQuery mobile Tabs and Anchors
问题描述
我想使用jQuery Mobile创建一个带标签的移动页面。我已经掌握了创建选项卡的基础知识（例如Tab1，Tab2，Tab3，Tab4），并让每个选项卡加载新的内容页面。 如何在特定标签中使用锚点？因此，例如，如果有人想要将链接带入Tab4 Anchor1的链接。
I would like create a tabbed mobile page using jQuery Mobile. I have got the basics of creating tabs (For Example Tab1, Tab2, Tab3, Tab4) and having each tab load a new page of content. How would I go about using an anchor within a specific tab? So for example if someone wanted to bookmark a link that took them right to Tab4 Anchor1.
我是JavaScript和jQuery的新手。
I am pretty new to JavaScript and jQuery.
以下代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<!-- JavaScript HTML requirements -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="d" id="home" data-id="nav">
<header data-role="header" >
<h1>TEST</h1>
<div data-role="navbar" data-id="nav">
<ul>
<li><a href="#home" data-icon="home" data-theme="d" class="ui-btn-active ui-state-persist" >Home</a></li>
<li><a href="#speakers" data-icon="star" data-theme="d">Speakers</a></li>
<li><a href="#" data-icon="grid" data-theme="d">News</a></li>
</ul>
</div>
</header>
<section data-role="content"> Home </section>
<footer data-role="footer" class="ui-bar"> <a href="" data-icon="gear" class="ui-btn-right">Buy Tickets</a> </footer>
</div>
<div data-role="page" data-theme="d" id="speakers">
<header data-role="header" data-id="nav" >
<h1>TEST</h1>
<div data-role="navbar" >
<ul>
<li><a href="#home" data-icon="home" data-theme="d">Home</a></li>
<li><a href="#speakers" data-icon="star" data-theme="d"
class="ui-btn-active ui-state-persist">Speakers</a></li>
<li><a href="#" data-icon="grid" data-theme="d">News</a></li>
</ul>
</div>
</header>
<section data-role="content">The name attribute specifies the name of an anchor.
The name <a href="#jib">attribute</a> is used to create a bookmark inside an HTML document.
Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.
Bookmarks are not displayed in any special way. They are invisible to the reader. <a name="jib"></a> Speakers </section>
<footer data-role="footer" class="ui-bar"> <a href="" data-icon="gear" class="ui-btn-right">Buy Tickets</a> </footer>
</div>
</body>
</html>
推荐答案
我想我理解，但如果我有意，请随时发表评论我误解了你的问题。
I think I understand but feel free to comment if I'm misunderstanding your question.
我相信你误解了内部JQuery链接是如何工作的。首先要看一下JQuery Mobile页面解剖，特别是在你的情况下的多页面模板结构：
http://jquerymobile.com/test/docs/pages/page-anatomy.html
I believe you're misunderstanding how internal JQuery linking works. First thing is take a look at the JQuery Mobile page anatomy, especially at the "Multi-page template structure" in your case: http://jquerymobile.com/test/docs/pages/page-anatomy.html
基本上，页面中的每个嵌入页面中间部分都需要是一个标有 data-role =page标记的独立div。它的ID将成为你的锚点。
Basically every "embedded in the middle of page" section of your page will need to be a stand alone div marked with the data-role="page" tag. Its ID is going to be what you'll point an anchor to.
所以为了让你的内部< a href =＃jib> 工作，你必须有一个ID =jib的内置div
So in order for your internal <a href="#jib"> to work you have to have a built in div with ID = "jib"
评论后更新的答案
您要找的是 $ .mobile.silentScroll 。您想获得锚链接的Y位置，然后让页面滚动到它。虽然有点小问题。由于在页面转换时发生的JQuery Mobile动画，您需要在滚动发生之前添加一点暂停。
What you're looking for is $.mobile.silentScroll . You want to get your anchor link's Y-position and then have the page scroll to it. There is a little gotcha though. You'll need to add a little pause before the scroll happens because of the JQuery Mobile animations that happen on page transition.
function loadJib()
{
$.mobile.changePage('#jib',{transition:"slide"});
var yPos = $('#mylink').get(0).offsetTop;
setTimeout(function(){
$.mobile.silentScroll(yPos);
},800);
看看我是怎么做的（延迟时间为.8秒）。：
Take a look how I did it ( .8 second delay ).:
http://jsbin.com/ahevav/3/edit
这篇关于jQuery移动选项卡和锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
