10

ラチェットから push.js エンジンを実装しようとしています:

http://maker.github.com/ratchet/#push

ここからラチェットファイルをダウンロードしました:

http://maker.github.com/ratchet/ratchet.zip

すべてのjs、css、およびhtmlを提供するためにapacheを使用しています。すべてのファイルは同じディレクトリにあります。

ここに私のone.htmlファイルがあります:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ratchet template page</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Include the compiled Ratchet CSS -->
    <link rel="stylesheet" href="ratchet.css">

    <!-- Include the compiled Ratchet JS -->
    <script src="ratchet.js"></script>

  </head>
  <body>

  <!-- Make sure all your bars are the first things in your <body> -->
  <header class="bar-title">
    <h1 class="title">one.html</h1>
  </header>

  <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
  <div class="content">

    <ul class="list">
      <li>
        <a href="two.html">
          <strong>two</strong>
          <span class="chevron"></span>
        </a>
      </li>
    </ul>

  </div>

  </body>
</html>

ここに私のtwo.htmlファイルがあります:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ratchet template page</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Include the compiled Ratchet CSS -->
    <link rel="stylesheet" href="ratchet.css">

    <!-- Include the compiled Ratchet JS -->
    <script src="ratchet.js"></script>

  </head>
  <body>

  <!-- Make sure all your bars are the first things in your <body> -->
  <header class="bar-title">
    <h1 class="title">two.html</h1>
  </header>

  <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
  <div class="content">

    <ul class="list">
      <li>
        <a href="one.html">
          <strong>one</strong>
        </a>
      </li>
    </ul>

  </div>

  </body>
</html>

これら 2 つのファイルをリンクするにはどうすればよいですか?

push.js が含まれているように見えますが、a href をクリックしても何もしません。

この実装について明らかに明らかな何かが欠けているように感じます。

助けてくれてありがとう。

4

8 に答える 8

12

Ratchet は、ブラウザでは利用できないタッチ イベントから動作します。Chrome で chrome://flags/ に移動し、「強制的にタッチ イベントを有効にする」を有効にします。これは、ブラウザ開発のトリックを行う必要があります。フラグのないデスクトップでこれを機能させたい場合は、タッチ イベントをポインター イベントに変換するための js フレームワークが必要になります。https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.jsのようなものがうまくいくはずです。

于 2013-01-31T08:13:16.043 に答える
10

Ratchet は、デスクトップ ブラウザで使用されるポインター イベントとは異なる、モバイル デバイスでのタッチ イベントを使用します。

以前の回答で述べたように Chrome フラグを使用するか、タッチ イベントをポインター イベントに変換する @fat の fingerblast.js を使用できます。

fingerblaster.js ファイルは、 https ://github.com/stephanebachelier/fingerblast.js にあります。

重要: fingerblaster.js を有効にするには、body 要素の最後に次のようなスクリプトを含める必要があります (HTML コンテンツが読み込まれた後)。

<script type='text/javascript'>
    var fb = new FingerBlast ('body');
</script>

これにより、新しい FingerBlast オブジェクトが作成され、リスナーが html ドキュメントの本文に設定されます (「本文」の代わりに任意の CSS セレクター文字列を配置できます)。

于 2013-03-19T23:17:04.393 に答える
3

私は同じ質問をしました。ウェブブラウザではなく、ios / phoneでのみ動作するようです。

参照: https://github.com/maker/ratchet/issues/148

于 2013-01-30T21:43:44.823 に答える
2

Ripple Emulator はこの「問題」でうまく機能することがわかりました(Chrome でのみ利用できると思います)。

別のjsライブラリを追加する必要がないのでいいです

于 2014-01-15T12:51:46.727 に答える
2

最新の Firefox ブラウザーには、「レスポンシブ デザイン ビュー」と呼ばれる Web 開発者向け機能があります。携帯電話/タブレットでの使用をシミュレートするために、小さなビューポートで Web ページを表示できます。また、タッチ イベントをシミュレートすることもできます。Web アプリで Ratchet を使用する場合に特に便利であることがわかりました。

Firefox では、[ツール] -> [Web 開発者] -> [レスポンシブ デザイン ビュー] に移動するか、ホットキー "option + command + m" を使用して、レスポンシブ デザイン ビューを有効にできます。

レスポンシブ デザイン ビューの詳細については、こちらを参照してください

于 2014-07-15T12:19:35.827 に答える
1

Chrome Canary をダウンロードし、開発者ツールで電話アイコン (最初のアイコン) をクリックしてから、エミュレートする携帯電話を選択します。Responsinator.com を使用することもできます

PushJS は、ratchet.js に組み込まれています。

于 2014-08-29T20:59:40.570 に答える
0

Google Chrome では、開発者コンソールを使用して、タッチ イベントでモバイル デバイスをエミュレートできます https://developer.chrome.com/devtools/docs/device-mode#emulate-touch-events

于 2014-12-24T11:19:11.050 に答える