touchevents.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <section id="touchevents" data-transition="slide">
  2. <header data-title="Touch Events">
  3. <nav class="box">
  4. <a href="#back" data-router="section" data-label="back"></a>
  5. </nav>
  6. </header>
  7. <article class="active">
  8. <div class="two rows" id="touchevents-console">Test them...</div>
  9. <div class="eight rows list scroll">
  10. <ul>
  11. <li class="anchor">Test events in your Mobile Device</li>
  12. <!-- <li data-event="touch"><strong>Touch me!</strong></li> -->
  13. <li data-event="tap" id="prueba"><strong>Tap me!</strong></li>
  14. <li data-event="doubleTap"><strong>doubleTap me!</strong></li>
  15. <li data-event="hold"><strong>hold me!</strong></li>
  16. <li data-event="drag">
  17. <strong>Drag me!</strong>
  18. </li>
  19. <li data-event="swipe">
  20. <strong>Swipe me!</strong>
  21. <small>Drag in any direction</small></li>
  22. <li data-event="swipeLeft"><strong>swipeLeft me!</strong></li>
  23. <li data-event="swipeUp"><strong>swipeUp me!</strong></li>
  24. <li data-event="swipeRight"><strong>swipeRight me!</strong></li>
  25. <li data-event="swipeDown"><strong>swipeDown me!</strong></li>
  26. <li data-event="swiping"><strong>swiping me!</strong></li>
  27. <li data-event="rotate">
  28. <strong>rotate me!</strong>
  29. <small>Drag in any direction</small></li>
  30. <li data-event="rotateLeft"><strong>rotateLeft me!</strong></li>
  31. <li data-event="rotateRight"><strong>rotateRight me!</strong></li>
  32. <li data-event="rotating"><strong>rotating me!</strong></li>
  33. <li data-event="pinch">
  34. <strong>pinch me!</strong>
  35. <small>Drag in any direction</small></li>
  36. <li data-event="pinchIn"><strong>pinchIn me!</strong></li>
  37. <li data-event="pinchOut"><strong>pinchOut me!</strong></li>
  38. <li data-event="pinching"><strong>pinching me!</strong></li>
  39. </ul></div>
  40. </article>
  41. </section>