0

jQueryMobileを使用してタブ付きモバイルページを作成したいと思います。タブ（たとえば、Tab1、Tab2、Tab3、Tab4）を作成し、各タブにコンテンツの新しいページをロードさせる基本を習得しました。特定のタブ内でアンカーを使用するにはどうすればよいですか？たとえば、誰かがTab4Anchor1に直接移動するリンクをブックマークしたい場合です。

私は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位置を取得してから、ページをスクロールさせます。ただし、ちょっとした落とし穴があります。ページ遷移時に発生するJQueryMobileアニメーションのため、スクロールが発生する前に少し休止を追加する必要があります。

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 に答える