Ratchet Push.js不推

Question

Ratchet Push.js不推

t0m*_*mgs 4 javascript ratchet-bootstrap ratchet-2

我在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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

kin*_*ple 5

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

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

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

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

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

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

归档时间：	11 年，2 月前
查看次数：	2195 次
最近记录：	11 年，1 月前