4

CodeIgniter の上に PHP アプリを構築しました。これは、ある静的ページから別のページ (.html ファイル) ではなく、コントローラーからコントローラー (.php ファイル) に移動することによって機能します。

問題: リンクが機能しません。

これが問題であるかどうかはわかりませんが、ドキュメントを調べたところ、ソースコードと比較して唯一の例外のようです.htmlファイルではなく.phpファイルを呼び出しています.

あなたが尋ねる前に-私のシステムでbooknavは、実行可能なコントローラーであり、クリックすると実行可能なビューが読み込まれます。

また、ここのスニペットが実際に機能していることもわかります。私はこれをデバッグしようとしています - 私のサーバー上の同等のものはリンクを送信しないのに、ここのスニペットはリンクを送信するのはなぜですか?

最終的な HTML ファイルは次のとおりです。 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Project</title>
  <!-- Including Ratchet CSS + JS + Custom CSS !-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-status-bar-style" content="black">
  <link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.js"></script>
</head>

<body>
  <header class="bar bar-nav">
    <h1 class="title">Select Your Book</h1>
  </header>
  <div class="content">
    <div class="card">
      <ul class="table-view">
        <li class="table-view-cell">
          <a class="navigate-right" href="booknav" data-transition="slide-in">
            <span><strong> Book 1</strong></span>
          </a>
        </li>
        <li class="table-view-cell">
          <a class="navigate-right" href="booknav" data-transition="slide-in">
            <span><strong> Book 2</strong></span>
          </a>
        </li>
        <li class="table-view-cell">
          <a class="navigate-right" href="booknav" data-transition="slide-in">
            <span><strong> Book 3</strong></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

4

1 に答える 1

5

リンクをクリックするhttp://yourwebserver/projectroot/booknavと、遷移アニメーションでページ コンテンツを交換するのではなく、ブラウザーが移動する場合は、ブラウザーでデバイスをエミュレートしていないことが原因です。イベントが発生しないため、push.js はトリガーされtouchendません。Chrome 開発者ツールを使用するか、ripple をインストールします。

ラチェットは、ウィンドウの touchend イベントのハンドラーを追加し、ナビゲーションをインターセプトして、DOM とは別にターゲット ページ全体を読み込み、新しいコンテンツを DOM のコンテンツ コンテナーと交換します。

ratchet.js を実行するためのいくつかの一般的な要件

1) Web サーバー内で実行されている、またはデバイスに展開されているアプリをテストするため。
2) エミュレーターを使用してタッチ イベントをトリガーする (またはデバイス上で実行する)
必要があります。3) ページ コンテンツは適切にフォーマットする必要があります。各ページに一致するヘッダー、フッター、ナビゲーション、コンテンツ要素が必要です。data-transitionリンクに欠落しているタグがあってはなりません。

デベロッパー ツールを有効にしてデバイス エミュレーションを有効にするか、hammer.js タッチ エミュレーターなどのライブラリを使用して、Chrome でタッチ イベントをトリガーできます。クリックをトリガーすると、push.js をバイパスし、ブラウザーは目的とは異なるナビゲートを行います。

コンテンツが適切にフォーマットされていない場合、ブラウザーは現在の場所が何であれ、ページを再読み込みしますが、これは望ましくありません。

于 2014-11-08T04:41:01.317 に答える