78

Touch-enabled Gesture Helper for your website

 5 years ago
source link: https://www.tuicool.com/articles/hit/BvMz2a7
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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>

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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK