Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 84 lines (56 sloc) 4.271 kb
7e43149 @dotmaster hitTarget and a better eventPropagation fix
authored
1 <h1>NEW!!! NOW WORKING EVEN ON IE 7/8</h1>
2
4a8c989 @dotmaster index
authored
3 <h1>Touchable</h1>
4
c1182ed @dotmaster refacting directory structure
authored
5 <p>Touchable is a very lightweight (1,96kb) jQuery Class that unifies touch and mouse events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
4a8c989 @dotmaster index
authored
6 The name Touchable therefore might be a bit confusing, cause we actually generate a generic "Touch" which involves also mouse events. For convenience they are all called "Touches".</p>
7
8 <p>Touchable really doesn't depend that much on jQuery, so it should work with other libraries like <a href="http://zeptojs.com/">Zepto</a> too. Havent tested that though.</p>
9
10 <h1>Hoverable</h1>
11
7e43149 @dotmaster hitTarget and a better eventPropagation fix
authored
12 <p>Hoverable is built upon Touchable and is a very lightweight (1,57kB / 3,04 together with Touchable) jQuery Class that unifies hover events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
4a8c989 @dotmaster index
authored
13 It introduces a new event called </p>
14
15 <ul>
83bd429 @dotmaster gh-pages
authored
16 <li><strong>newHover(2)</strong>: following my <a href="http://grenzgenial.com/post/2429779568/longtap-is-the-new-hover">blog article</a> about UI design and my postulate, that Long Tap is the new Hover. Fired when the user hovers with the mouse or longTaps an element. Hovever if you want to you can set it up to a touchmove event too, which will fire a genericHover2 event.</li>
4a8c989 @dotmaster index
authored
17 </ul>
18
83bd429 @dotmaster gh-pages
authored
19 <h2>Testing</h2>
20
c1182ed @dotmaster refacting directory structure
authored
21 <p>right now I have tested Touchable on the following devices and browsers Chrome, Firefox, Safari, iPad Simulator, iPad, iPhone, Internet Explorer 7/8. But it should work quite everywhere. If you have any bug notes drop me a line.</p>
4a8c989 @dotmaster index
authored
22
23 <h2>Demo</h2>
24
c1182ed @dotmaster refacting directory structure
authored
25 <p>I have setup a demo site for Hoverable on the <a href="http://dotmaster.github.com/Touchable-jQuery-Plugin/demo/demo.html">github page</a>. View source to see how everything works.</p>
4a8c989 @dotmaster index
authored
26
27 <h2>Usage</h2>
28
29 <p>Right now Touchable supports five basic events and Hoverable adds two generic Hover events, all events when bound with jQuery's bind function get a touch object passed in as second argument</p>
30
31 <h1>TOUCHABLE</h1>
32
33 <ul>
34 <li><strong>touchablemove</strong>: fired when the user touched or clicked with the mouse and moves to another position. Right now Touchable supports up to 2 fingers. If 2 fingers are on screen the lower left is taken as a reference.</li>
35 <li><strong>touchableend</strong>: fired when the user ended a touch</li>
36 <li><strong>tap</strong>: fired when the user clicks with his mouse or taps with his finger</li>
37 <li><strong>longTap</strong>: fired when the user stays with his mouse or finger on an item for 1 second</li>
83bd429 @dotmaster gh-pages
authored
38 <li><strong>doubleTap</strong>: fired when the user taps two times within half of a second</li>
39 </ul>
40
41 <h1>HOVERABLE</h1>
4a8c989 @dotmaster index
authored
42
83bd429 @dotmaster gh-pages
authored
43 <ul>
44 <li><strong>newHover(2)</strong>: Fired when the user hovers with the mouse or longTaps an element. Hovever if you want to you can set it up to a touchmove event too, which will fire a genericHover2 event.</li>
4a8c989 @dotmaster index
authored
45 </ul>
46
47 <p>you use it by initializing Touchable on a view element, like so:</p>
48
49 <pre><code>var div = $(&lt;div&gt;).Touchable();
50 </code></pre>
51
52 <p>or</p>
53
54 <pre><code>var div = $(&lt;div&gt;).Hoverable(); //which cretaes a Touchable internally
55 </code></pre>
56
57 <p>then you bind to the events</p>
58
59 <pre><code>div.bind('touchmove', function(e, touch){})
60 div.bind('newHover2', function in(e, touch){}, function out(e, touch){})
61 </code></pre>
62
63 <p>notice, that each event gets passed a touch object, besides the normal event object. The Touch object has the following properties: </p>
64
65 <ul>
66 <li>startTouch: this is where the touch or mousedown event originated</li>
67 <li>currentTouch: this is where we are right now with our finger or mouse </li>
68 <li>previousTouch: for internal calculations of the previous position of the mouse pointer or finger, used for deltas see below</li>
69 <li>currentDelta: measured from previous move event</li>
70 <li>currentStartDelta, currentPosition: the relative position, measured from start calculated in different ways, but should be the same</li>
71 </ul>
72
7e43149 @dotmaster hitTarget and a better eventPropagation fix
authored
73 <h2><strong>Event targets:</strong></h2>
74
75 <ul>
76 <li>currentTarget: the event target element (may differ on mobile browsers from the ctarget element)</li>
77 <li>target: the event target element</li>
78 </ul>
79
4a8c989 @dotmaster index
authored
80 <h2>Todos</h2>
81
82 <ul>
83 <li>support more gestures like swiping,...</li>
83bd429 @dotmaster gh-pages
authored
84 </ul>
Something went wrong with that request. Please try again.