Javascript 如何使用ratchet启用push.js ajax内容加载器_Javascript_Ios_Ratchet Bootstrap_Push.js

Javascript 如何使用ratchet启用push.js ajax内容加载器

javascript ios

Javascript 如何使用ratchet启用push.js ajax内容加载器,javascript,ios,ratchet-bootstrap,push.js,Javascript,Ios,Ratchet Bootstrap,Push.js,我正在尝试从ratchet实现push.js引擎：我从这里下载了ratchet文件：我使用apache为所有的js、css和html提供服务。所有文件都在同一目录中这是我的one.html文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ratchet template page</title> <!-

我正在尝试从ratchet实现push.js引擎：

我从这里下载了ratchet文件：

我使用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>

<!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>


棘轮模板页
one.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">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>

<!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.html

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

它看起来像是包含了push.js，但当我点击a href时，什么也没做

我觉得我在这个实现中遗漏了一些显而易见的东西

谢谢你的帮助。

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

请参阅：

Ratchet在触摸事件之外工作，这些事件在浏览器中不可用。在Chrome中，转到chrome://flags/ 并启用“强制启用触摸事件”。这对浏览器开发来说应该是个好办法。如果您想在没有该标志的桌面上实现此功能，则需要一个js框架来将触摸事件转换为指针事件。类似的东西应该可以做到这一点。

Ratchet在移动设备上使用的触摸事件与桌面浏览器中使用的指针事件不同

您可以使用前面答案中提到的Chrome标志，也可以使用@fat的fingerblast.js将触摸事件转换为指针事件

fingerblaster.js文件可在此处找到：

重要提示：为了启用fingerblaster.js，您需要在body元素的末尾包含一个脚本，如以下内容（一旦加载了html内容）：


var fb=新的指套（“主体”）；

这将创建一个新的FingerBlast对象，并在html文档的主体上设置侦听器（您可以将任何css选择器字符串放在“主体”的位置）。

我发现这对这个“问题”非常有效（我认为只有在Chrome上可用）

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

现代Firefox浏览器有一个称为“响应式设计视图”的web开发者功能。它允许您在较小的视口中查看网页，以模拟在手机/平板电脑上的使用。它还允许您模拟触摸事件。我发现它在web应用程序上使用Ratchet时特别有用

在Firefox中，您可以通过进入工具->Web开发者->响应设计视图或使用热键“option+command+m”来启用响应设计视图

可以找到更多关于响应设计视图的信息。

您可以下载Chrome Canary，并使用开发者工具单击手机图标（第一个），然后选择要模拟的手机，甚至可以使用

PushJS嵌入到ratchet.js中。

在Google Chrome上，您可以使用开发者控制台模拟带有触摸事件的移动设备

使用FingerBlast。尝试了Chrome和Safari，效果不错

很高兴你觉得它有用。在我第一次使用FingerBlast时，为了弄清楚如何让它工作，我不得不对FingerBlast进行一些研究！url已失效，请尝试此url:现在位于：