Question

我正在尝试从棘轮实现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，但是当我点击一个href时什么也没做。

我觉得我错过了一些关于这种实现的明显的事情。

感谢您的帮助。

Answer 1

Ratchet可以处理触摸事件，这些事件在您的浏览器中无法使用。在Chrome中，转到chrome：// flags /并启用“强制启用触摸事件”。这应该成为浏览器开发的诀窍。如果你想在没有标志的桌面上工作，你将需要一个js框架来将触摸事件转换为指针事件。像https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.js之类的东西可以解决问题。

Answer 2

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'的位置）。

Answer 3

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

请参阅：https://github.com/maker/ratchet/issues/148

Answer 4

我发现Ripple Emulator 对这个“问题”非常有用（我认为只在Chrome上提供）

这很好，因为你不需要添加另一个js库

Answer 5

现代Firefox浏览器具有名为＆＃34;响应式设计视图＆＃34;的Web开发人员功能。它允许您在较小的视口中查看网页，以模拟在手机/平板电脑上的使用。它还允许您模拟触摸事件。我发现在网络应用程序上使用Ratchet时它特别有用。

在Firefox中，您可以转到工具 - ＆gt;启用响应式设计视图。 Web开发人员 - ＆gt;响应式设计查看或使用热键＆＃34;选项+命令+ m＆＃34;。

有关响应式设计视图的更多信息，请参见here。

Answer 6

您可以下载Chrome Canary并使用开发人员工具点击电话图标（第一个），然后选择您要模拟的手机，甚至可以使用Responsinator.com。

PushJS嵌入到ratchet.js。

Answer 7

使用FingerBlast。尝试使用Chrome浏览器，它可以运行。

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

Answer 8

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

如何使用棘轮启用push.js ajax内容加载器

8 个答案: