Touch

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

<div class="touch_container">
	<div class="touch_target">Touch</div>
</div>

$(".touch_target").touch({
  pan: true,
  scale: true
}).on("panstart", function(e) {
  // Handle pan start
  // Cache positions, etc...
}).on("panend", function(e) {
  // Handle pan end
  // Clean up data...
}).on("pan", function(e) {
  var deltaX  = e.deltaX,
    deltaY  = e.deltaY;

  // React to pan...
}).on("scalestart", function(e) {
  // Handle scale start
  // Cache positions, etc...
}).on("scaleend", function(e) {
  // Handle touch end
  // Clean up data...
}).on("scale", function(e) {
  var scale   = e.scale,
    deltaX  = e.deltaX,
    deltaY  = e.deltaY;

  // React to scale and pan...
});

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:

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.

Events

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

Methods

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

defaults

Extends plugin default settings; effects instances created hereafter.

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

Parameters

destroy

Removes plugin instance.

$(".target").touch("destroy");

CSS