Skip to content

Latest commit

 

History

History
156 lines (110 loc) · 3.31 KB

touch.md

File metadata and controls

156 lines (110 loc) · 3.31 KB

Touch

A jQuery plugin for multi-touch events.

Using Touch

Main

touch.js

Dependencies

jQuery
core.js

Basic

Touch normalizes mouse and touch events in the context of a few basic gestures: pan, swipe and scale. It is up to the developer to utilize the events. Events emitted by Touch will contain the following extra properties:

Key Description
pageX Current X position
pageY Current Y position
deltaX Change in X position
deltaY Change in Y position
scale Current scale value
directionX Current X movement
directionY Current Y movement

Pan

Pan can be used for building touch-friendly draggable interfaces:

$(".target").touch({
	pan: true
}).on("panstart", function(e) {
	console.log("Started panning");
}).on("pan", function(e) {
	console.log("Panning");
}).on("panend", function(e) {
	console.log("Stopped panning");
});

Swipe

Swipe can be used for building touch-friendly swipable interfaces:

$(".target").touch({
	swipe: true
}).on("swipe", function(e) {
	console.log("Swiped");
});

Scale

Scale can be used for building touch-friendly scalable interfaces:

$(".target").touch({
	scale: true
}).on("scalestart", function(e) {
	console.log("Started scaling");
}).on("scale", function(e) {
	console.log("Scaling");
}).on("scaleend", function(e) {
	console.log("Stopped scaling");
});

Note: pan, swipe and scale can also be used together to create a rich interface.

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-touch-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
axis string null Limit axis for pan and swipe; 'x' or 'y'
pan boolean false Pan events
scale boolean false Scale events
swipe boolean false Swipe events
## Events

Events are triggered on the target instance's element, unless otherwise stated.

Event Description
panstart Panning started
pan Panning
panend Panning ended
scalestart Scaling started
scale Scaling
scaleend Scaling ended
swipe Swipe
## Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Extends plugin default settings; effects instances created hereafter.

$.touch("defaults", { ... });

Parameters

Name Type Default Description
options object {} New plugin defaults

destroy

Removes plugin instance.

$(".target").touch("destroy");
## CSS
Class Type Description
.fs-touch-element element Target Element