0

私は新しいブートストラップと jQuery を使用しています。ジェスチャーでページ間を移動する最良の方法を見つけようとしています。

私はもともとlocation.replaceジェスチャーを登録した後に発火しました。次に、Ajax メソッドhereを見つけました。これには、ページであるかのように div と div 間のリンクがあります。

<div data-role="page" id="foo">

ただし、Bootstrap でこれを実行すると、ボタンは正常にクリックされますが、URL が の適切なドメインを反映しているにもかかわらず、空白のページが読み込まれmydomain.com/page#fooます。リロードすると、「2 ページ目」が読み込まれます。

私はこれを別の方法で行うことができることを知っていますが、a) 私は ajax リンクで最善の方法を行っていますか? b) なぜ機能しないのですか? 方法 1 を使用して、ページの読み込みにトランジションを追加する必要がありますか?

アプリの背景は完全なモバイル Web アプリです。

<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>

<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">Meteor Prototype</a>
    <div class="nav-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="map-page.php">Map Page</a></li>
        <li><a href="exhibit-list-page.php">Exhibit List Page</a></li>
        <li><a href="exhibit-page.php">Exhibit Page</a></li>
        <li><a href="top-level-museum.php">Top Level Museum</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container">

<!-- Start of first page -->
<div data-role="page" id="foo">

<div data-role="header">
    <h1>Foo</h1>
</div><!-- /header -->

<div data-role="content">
    <p>I'm first in the source order so I'm shown as the page.</p>
    <p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">

<div data-role="header">
    <h1>Bar</h1>
</div><!-- /header -->

<div data-role="content">
    <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
    <p><a data-transition="flip" data-inline="true" href="#foo">Back to foo</a></p>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

   <script src="js/jquery.js"></script>
   <script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
4

0 に答える 0