Как включить загрузчик контента ajax для push.js с храповым механизмом

Я пытаюсь реализовать движок 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>

и вот мой файл .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, ничего не делает.

Я чувствую, что мне не хватает чего-то очевидного очевидного в этой реализации.

спасибо за помощь.

Ответ 1

Ratchet работает с сенсорными событиями, которые недоступны в вашем браузере. В Chrome перейдите в chrome://flags/и включите "Force enable touch events". Это должно сделать трюк для развития браузера. Если вы хотите сделать эту работу на рабочих столах без флага, вам понадобится js framework для преобразования событий касания к событиям указателя. Что-то вроде https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.js должно сделать трюк.

Ответ 2

Ratchet использует события касания на мобильных устройствах, которые отличаются от событий указателя, используемых в обозревателе рабочего стола.

Вы можете использовать флагов Chrome, как указано в более ранних ответах, или использовать файл @fat fingerblast.js, который преобразует события касания в события указателя.

Файл fingerblaster.js можно найти здесь: https://github.com/stephanebachelier/fingerblast.js

ВАЖНО: для включения fingerblaster.js вам нужно включить script, например, следующее в конце вашего элемента body (после загрузки содержимого html):

<script type='text/javascript'>
    var fb = new FingerBlast ('body');
</script>

Это создаст новый объект FingerBlast и установит слушателя на тело html-документа (вы можете поместить любую серию-селектор css вместо "body" ).

Ответ 3

Я задал тот же вопрос. Похоже, он работает только на ios/phones, а не в веб-браузере.

Смотрите: https://github.com/maker/ratchet/issues/148

Ответ 4

Я обнаружил, что Эмулятор пульсаций отлично справляется с этой "проблемой" (я думаю, что это доступно только в Chrome)

Это хорошо, потому что вам не нужно добавлять другую библиотеку js

Ответ 5

В современных браузерах Firefox есть функция веб-разработчика под названием "Отзывчивый дизайн". Он позволяет просматривать веб-страницу в меньшем окне просмотра, чтобы имитировать использование на телефоне/планшете. Он также позволяет моделировать события касания. Я нашел это особенно полезным при работе с Ratchet в веб-приложении.

В Firefox вы можете включить "Ревизионный дизайн", выбрав "Инструменты" → "Веб-разработчик" - "Отзывчивый дизайн" или "Горячие клавиши" + команда + m ".

Более подробную информацию о Ревизионном дизайне можно найти здесь.

Ответ 7

Вы можете загрузить Chrome Canary и с помощью инструментов для разработчиков щелкнуть по значку телефона (первый), а затем выбрать, какой мобильный телефон вы хотите подражать, вы даже можете использовать Responsinator.com.

PushJS встроен в ratchet.js.