0

我想使用 jQuery Mobile 创建一个选项卡式移动页面。我已经掌握了创建选项卡（例如 Tab1、Tab2、Tab3、Tab4）和让每个选项卡加载新的内容页面的基础知识。我将如何在特定选项卡中使用锚点？例如，如果有人想为一个链接添加书签，该链接将他们直接带到 Tab4 Anchor1。

我对 JavaScript 和 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>
4

1 回答 1

2

我想我理解，但如果我误解了你的问题，请随时发表评论。

我相信您误解了内部 JQuery 链接的工作原理。首先是看一下 JQuery Mobile 页面结构，尤其是在您的情况下的“多页模板结构”：http: //jquerymobile.com/test/docs/pages/page-anatomy.html

基本上，页面的每个“嵌入页面中间”部分都需要是一个标有data-role="page"标签的独立 div。它的 ID 将是您将锚点指向的内容。

因此，为了让您的内部<a href="#jib">工作，您必须有一个 ID = "jib" 的内置 div

评论后更新的答案

您正在寻找的是$.mobile.silentScroll. 您想要获取锚链接的 Y 位置，然后让页面滚动到它。不过有一个小问题。由于页面转换时会发生 JQuery Mobile 动画，您需要在滚动发生之前添加一点暂停。

function loadJib()
{
  $.mobile.changePage('#jib',{transition:"slide"});

  var yPos = $('#mylink').get(0).offsetTop;

  setTimeout(function(){
    $.mobile.silentScroll(yPos);
  },800);

看看我是怎么做到的（延迟 0.8 秒）。：

http://jsbin.com/ahevav/3/edit

于 2012-08-29T16:53:13.837 回答