78
Touch-enabled Gesture Helper for your website
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 thegesture_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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK