viernes, 11 de abril de 2014

JavaScript: Events tàctils amb llibreries

www.w3.org-script

JavaScript: Events tàctils

Amb l'aparició i acceptació del iphone, sobre el 2007, l'ús dels events tàctils ("touch") comença a ser acceptat als diferents navegadors.
Poc a poc es van normalitzant i per exemple a Mozilla pots trobar una bona font de informació de com tratactar-los.
TapQuo també publica una guia gràfica (veure a meitat de la pàgina) molt útil per a les formacions.

Llibreries

Per a facilitar l'ús i programació dels diferents events apareixen llibreries que faciliten el seu tractament:
JQuery Mobile
Zepto JS
TapQuo JS (Una fantàstica empresa de Bilbao)

En el meu cas he estat jugant darrerament amb les llibreries de Zepto que ofereix de 2 llibreries:

touch.js: Events com tap, singletap, doubleTap, swipe, swipeUp,...
gesture.js: Events com pinc, pinchIn,pinchOut,

Amb aquestes llibreries pots programar, per exemple, un toc ("tap") o un desplaçament ("swipe") simplement fent:

...

<script type="text/javascript" src="zepto.min.js"></script>

<script type="text/javascript" src="touch.js" ></script>

...

<script type="text/javascript">

  $(function()

  { var ditet = $('#areatactil');

 var cl=$("#crono"); // crono

 var rep=$("#liststop"); // inventory

... 

 function clear() 

 {if (!t)

  {cl.html("0.0");

   rep.html("Crono initialized<br>");

  }

  else

  { rep.html((rep.html()+"Crono running.<strong>Reset not allowed!</strong><br>"));

  }

 } 

 // Events de touch

    ditet.on('swipe', clear); 

...

<div id="areatactil">

<span id="crono"> 0.0 </span> segundos 

<div id="liststop"></div>

</div>

...

A new IS hope

Google Website Translator Gadget

viernes, 11 de abril de 2014