4

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

问题：链接拒绝工作。

我不确定这甚至是问题，但我已经浏览了文档，与源代码相比，它似乎是唯一的例外——我调用的是 .php 文件而不是 .html 文件。

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

4

1 回答 1

5

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

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

运行 ratchet.js 的一些一般要求

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

您可以通过启用开发人员工具和启用设备仿真或使用诸如hammer.js touch emulator之类的库来触发chrome 中的触摸事件。如果您触发点击，您将绕过 push.js，浏览器将导航您不想要的内容。

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

于 2014-11-08T04:41:01.317 回答