10

我正在尝试从棘轮实现 push.js 引擎:

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

我从这里下载了棘轮文件:

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

并且正在使用 apache 来提供所有 js、css 和 html。所有文件都在同一个目录中。

这是我的 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>

我如何将这两个文件链接在一起?

看起来 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 选择器字符串放在“body”的位置)。

于 2013-03-19T23:17:04.393 回答
3

我问了同样的问题。似乎它只适用于 ios / 手机,而不适用于网络浏览器。

见: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 应用程序上使用 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 回答
1

使用 FingerBlast。试过 Chrome、Safari 和它的工作。

https://github.com/stephanebachelier/fingerblast.js/blob/master/lib/fingerblast.js

于 2015-06-07T22:09:30.373 回答
0

在 Google Chrome 上,您可以使用开发者控制台并通过触摸事件模拟移动设备 https://developer.chrome.com/devtools/docs/device-mode#emulate-touch-events

于 2014-12-24T11:19:11.050 回答