жесты onsen-ui не работают

Мне нужно реализовать меню с точно таким же внешним видом, как скользящее меню onsen, но оно скользит сверху. Я думал использовать жесты онсэна, чтобы иметь возможность перетаскивать меню, но образец жестов, представленный в руководстве по онсэнам, не работает. Я что-то упускаю?

  <ons-gesture-detector>
    <div id="detect-area" style="width: 300px; height: 300px;background-color:blue;">
      Swipe Here
    </div>
  </ons-gesture-detector>

  <script>
    alert("in");
    $(document).on('swipeleft', '#detect-area', function() {
      alert("swipe");
    })
  </script>

person user3526468    schedule 04.06.2015    source источник


Ответы (1)


Попробуйте это, должно сработать. Не забудьте сначала добавить jquery.

<ons-gesture-detector style="height: 300px; margin: 50px 50px;">
    <div id="hoge" style="border: 1px solid #ccc; background-color: #f9f9f9; width: 100%; height: 300px; line-height: 300px; text-align: center; color: #999;">
        ...
    </div>
</ons-gesture-detector>

<script>
    var eventName = 
      'drag dragleft dragright dragup dragdown hold release swipe swipeleft swiperight ' +
      'swipeup swipedown tap doubletap touch transform pinch pinchin pinchout rotate';

    $(document).on(eventName, '#hoge', function(event) {
      if (event.type !== 'release') {
        $(this).text(event.type);
      }
    });
 </script>

person Andi Pavllo    schedule 05.06.2015
comment
@ user3526468 рад, что помогло! Пожалуйста, рассмотрите возможность проголосовать за мой ответ. Это поможет будущим пользователям с той же проблемой легко найти решение. - person Andi Pavllo; 06.06.2015
comment
Я бы определенно сделал это, но у меня всего 14 репутации, а для голосования требуется 15. Я проголосую, когда/если доберусь туда. - person user3526468; 06.06.2015