手势操作

Usage

1. Include zUIx library

Add the following line, preferably inside the head section of the HTML document:

<script src="//genielabs.github.io/zuix/js/zuix.min.js"></script>

2. Load the gesture helper on the target element

Add the data-ui-load attribute to the element you want to detect gesture on

<div data-ui-load="@lib/controllers/gesture_helper"
     data-ui-options="gesture_options">
    <!-- gesture detection area -->
</div>

var gesture_options = {
  ready: function() {
    // register event callbacks
    this.on('gesture:touch', function(e, tp) {
      // TODO: handle touch
    }).on('gesture:pan', function(e, tp) {
      // TODO: handle pan
    }).on('gesture:release', function(e, tp) {
      // TODO: handle release
    }).on('gesture:tap', function(e, tp) {
      // TODO: handle tap
    }).on('gesture:swipe', function(e, tp) {
      // TODO: handle swipe
      switch(tp.direction) {
        case 'up':
          break;
        case 'down':
          break;
        case 'left':
          break;
        case 'right':
          break;
      }
    });
  }
}

Callbacks will receive the tp (TouchPointer) parameter

tp = {
  // time frame
  startTime,
  endTime,
  // initial touch position
  startX,
  startY,
  // relative movement
  shiftX,
  shiftY,
  // actual direction, speed, position
  direction, // 'left' | 'right' | 'up' | 'down'
  velocity,
  x: x,
  y: y,
  // original event + cancel method
  event,
  cancel()
};

Option attributes

• data-ui-load="@lib/controllers/gesture_helper" constructor load the gesture_helper controller on the element.
• data-ui-context optional identifier name to be used to reference this component from JavaScript.

Source code

Source code is available in the lib/controllers folder of zKit repository. https://github.com/genielabs/zkit

• gesture_helper.js : https://github.com/genielabs/zkit/blob/master/source/lib/controllers/gesture_helper.js