iNettuts compatibilité tactile ?

Version imprimable

22/07/2013, 11h05
Harmonic

iNettuts compatibilité tactile ?

Bonjour !

Je suis actuellement en stage de développement web et j'avais pour objectif de réaliser un site asp avec la gestion de widgets.

Pour cela j'ai utilisé une simple page html déjà existante qui est:
http://james.padolsey.com/demo/tut-i...-with-cookies/

Le problème est que l'on vient de me demander de rendre ma page asp compatible avec le tactile. C'est à dire que les widgets seraient déplaçables avec le doigt par exemple.

J'ai fait des recherches sur internet et j'ai appris l’existence d'un hack nommé "touch-punch" disponible ici:
http://touchpunch.furf.com/

J'ai alors testé de l'inclure en espérant que ça marche mais malheureusement non :(

Je voulais donc savoir si vous seriez comment rendre cette page à coup sur compatible tactile sachant que comme vous pouvez le constater cette page utilise une librairie jquery-ui personnalisée... Je bloque dessus depuis 3 jours...

Merci beaucoup !

Rebonjour, je viens de trouver la solution, je vous la donne ça peut toujours être utile :)

fonction javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function touchHandler(event) {
    var touch = event.changedTouches[0];
 
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);
 
    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

Et dans une fonction init() chargée dans une page_load via un ScriptManager:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function init() {
 
 
    var forEach = Array.prototype.forEach,
    $$ = document.querySelectorAll.bind(document);
 
    forEach.call($$('#columns .widget'), function (v) {
        v.addEventListener("touchstart", touchHandler, true);
        v.addEventListener("touchmove", touchHandler, true);
        v.addEventListener("touchend", touchHandler, true);
        v.addEventListener("touchcancel", touchHandler, true);
    });
}

22/07/2013, 14h38
danielhagnoul

Il y a des plugins.

Exemple : jQuery-Mobile-Events.
22/07/2013, 15h41
Harmonic

merci danielhagnoul:) Par ailleurs avec la méthode que j'ai utilisé, je me retrouve dans l'impossibilité d'éditer le widget c'est à dire réduire ou supprimer. J'ai juste ciblé vers .widget .widget-header mais affecter des events me bloquent certains script apparemment :( Comment peut-on contourner ça ? J'ai essayé l'ajout d'un span ciblé aux titres des widgets mais ça ne marche pas :/