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
基本上，页面的每个嵌入页面中间"部分都需要是一个独立的 div，并标有 data-role="page" 标签.它的 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"
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);
看看我是怎么做到的(延迟 0.8 秒).:
Take a look how I did it ( .8 second delay ).:
http://jsbin.com/ahevav/3/edit
这篇关于jQuery 移动标签和锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
