book
/
book_admin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Zepto touch functional test</title>
  <meta name="viewport" content="maximum-scale=1,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../test.css">
  <script src="../../src/zepto.js"></script>
  <script src="../../src/event.js"></script>
  <script src="../../src/ie.js"></script>
  <script src="../../src/touch.js"></script>
</head>
<body>
  <h1>Zepto touch functional test</h1>

  <p>
    Browser supports touch events?
    <script>document.write('ontouchstart' in window)</script><br>

    Browser supports MS pointer events?
    <script>document.write(!!navigator.msPointerEnabled)</script>
  </p>

  <div id="touch_test" style="width: 200px; height: 200px; background: #cce; -webkit-user-select: none">
    touch events test
  </div>

  <div id='touch_test_scrollable' style="width: 200px; height: 200px; background: #cec; -webkit-user-select: none">
    touch events test (scrollable cancel)
  </div>

  <div id='touch_test_single' style="width: 200px; height: 200px; background: #ecc; -webkit-user-select: none">
    touch events test (scrollable cancel, single tap only)
  </div>

  <div id="browser"> </div>

  <script>
    $('#browser').text(navigator.userAgent)

    /**
     * #touch_test
     * Container that captures all touch events.
     *
     * Prevents default on touchmove, disabling scrolling.
     * Captures swipes in all directions.
     * Captures tap, singleTap (after delay), doubleTap, longTap
     */
    $('#touch_test').bind('touchmove', function(e) { e.preventDefault() })
    listen_to('#touch_test')

    /**
     * #touch_test_scrollable
     * Container that allows scrolling while capturing all events except swipes in the direction of scroll
     *
     * Captures swipes in non-scrolling directions
     * Captures tap, singleTap (after delay), doubleTap, longTap
     */
    listen_to('#touch_test_scrollable')

    /**
     * #touch_test_single
     * Container that allows scrolling and captures only simple, single taps
     * eg: a button or a tappable list item
     *
     * Cancels touch after tap, disabling other touch events (singleTap, doubleTap)
     * Captures tap
     */
    $('#touch_test_single').bind('tap', function(e) {
      e.cancelTouch()
    })
    listen_to('#touch_test_single')


    function listen_to(el) {
      $(el).tap(function(){
        $(this).append(' | tap!')
      })
      .doubleTap(function(){
        $(this).append(' | double tap!')
      })
      .swipe(function(){
        $(this).append(' | swipe!')
      })
      .swipeLeft(function(){
        $(this).append(' | swipe left!')
      })
      .swipeRight(function(){
        $(this).append(' | swipe right!')
      })
      .swipeUp(function(){
        $(this).append(' | swipe up!')
      })
      .swipeDown(function(){
        $(this).append(' | swipe down!')
      })
      .longTap(function(){
        $(this).append(' | long tap!')
      })
      .singleTap(function(){
        $(this).append(' | single tap!')
      })
    }
  </script>
</body>
</html>