Question

我在CodeIgniter之上构建了一个PHP应用程序，它通过移动到控制器到控制器（.php文件）而不是从一个静态页面到另一个（.html文件）来工作。

问题：链接拒绝运作。

我不确定这是否是问题，But I've gone through the docs并且它似乎是与源代码相比唯一的例外 - 我正在调用.php文件而不是.html文件。 / p>

在你提问之前 - 在我的系统上，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>

Answer 1

如果您点击该链接并且浏览器导航到http://yourwebserver/projectroot/booknav而不是使用过渡动画交换页面内容，那么因为您没有在浏览器中模拟设备。未触发push.js，因为未触发touchend事件。使用chrome开发人员工具，或安装纹波。

ratchet为窗口touchend事件添加处理程序，拦截导航并将整个目标页面与DOM分开加载，然后将新内容与dom上的内容容器交换。

运行ratchet.js的一般要求

1）测试在Web服务器中运行或部署到设备的应用程序 2）您必须使用模拟器来触发触摸事件（或在设备上运行）
3）页面内容需要格式良好。它应该在每个页面上具有匹配的页眉，页脚，导航，内容元素。您的链接上不应缺少data-transition个标记。

您可以通过启用开发人员工具和启用设备模拟，或使用hammer.js touch emulator等库来触发Chrome中的触摸事件。如果触发点击，您将绕过push.js，浏览器将导航不是您想要的。

如果内容格式不正确，浏览器将重新加载当前位置的页面，这不是您想要的。

Ratchet Push.js不推

1 个答案: