- JavaScript
Molti utenti di Opera e FireFox conoscono l'esistenza dei cosiddetti Mouse Gestures (per FF esiste un plugin con lo stesso nome) - gesti del mouse ai quali il browser reagisce eseguendo varie azioni (come l'apertura di una nuova finestra, i segnalibri, indietro , avanti, ecc., ecc.). ecc.), l'unico inconveniente di questa funzionalità è che non c'è interazione con il sito e ho deciso di scrivere una piccola libreria che aiuterà gli sviluppatori ad aggiungere funzionalità simili al loro sito. .
Al momento la biblioteca comprende solo 8 semplici gesti:
- In alto: tieni premuto il pulsante del mouse e sposta il cursore verso l'alto di 50-200 pixel (per impostazione predefinita) e rilascia, l'offset lungo l'asse X dovrebbe essere almeno due volte più piccolo. che lungo l'asse Y
- In basso: sposta il cursore verso il basso
- Giusto
- In alto a sinistra: l'offset lungo gli assi X e Y non deve differire più del doppio
- In alto a destra
- In basso a sinistra
- In basso a destra
Successivamente, copia il seguente codice:
// usa jQuery per associare la funzione all'evento
// imposta i parametri
navigazione.minX = 50;
navigazione.minY = 50;
navigazione.maxX = 300;
navigazione.maxY = 300;
// funzioni di richiamata
navigazione.TopLeft = funzione (X,Y) ( );
navigazione.In alto = funzione (X,Y) ( );
navigazione.TopRight = funzione (X,Y) ( );
navigazione.Sinistra = funzione (X,Y) ( );
navigazione.Destra = funzione (X,Y) ( );
navigazione.BottomLeft = funzione (X,Y) ( );
navigazione.Bottom = funzione (X,Y) ( );
navigazione.BottomRight = funzione (X,Y) ( );
Questo è un template per le nostre “gesture”, le prime due righe sono necessarie per agganciare le nostre due funzioni agli eventi globali mousedown e mouseup (viene utilizzata la libreria jQuery). Le successive 4 righe indicano i parametri dei gesti, ad es. limiti entro i quali opereranno. Poi arriva la dichiarazione di 8 funzioni di callback; prendono come parametri gli offset assoluti lungo gli assi X e Y.
Per escludere falsi positivi delle nostre funzioni è meglio associarle al tasto “Ctrl” premuto (il codice del tasto “Ctrl” è 17, se volete cambiarlo vedete tutti i codici alla pagina http:/ /unixpapa.com/js/key.html):
$(finestra).keydown(funzione(evento)(interruttore (event.keyCode) (
caso 17:
$(document).mousedown(navigazione.mousedown);
$(document).mouseup(navigazione.mouseup);
rottura;
}
});
interruttore (event.keyCode) (
caso 17:
rottura;
}
});
Ed ecco come appare il codice del mio esempio:
funzione mouseGesture())($(finestra).keydown(funzione(evento)(
interruttore (event.keyCode) (
//…
// tasti diversi fanno cose diverse
// Browser diversi forniscono codici diversi
// vedere qui per i dettagli: unixpapa.com/js/key.html
//…
caso 17:
$(document).mousedown(navigazione.mousedown);
$(document).mouseup(navigazione.mouseup);
rottura;
}
});
$(finestra).keyup(funzione(evento)(
interruttore (event.keyCode) (
caso 17:
$(document).unbind("mousedown");
$(document).unbind("mouseup");
rottura;
}
});
Navigazione.maxX = 300;
navigazione.maxY = 300;
navigazione.TopLeft = funzione (X,Y) ( select($("div#left div.top"),Math.abs(X-Y)) );
navigazione.In alto = funzione (X,Y) ( select($("div#center div.top"),Y) );
navigazione.TopRight = funzione (X,Y) ( select($("div#right div.top"),Math.abs(X-Y)) );
navigazione.Sinistra = funzione (X,Y) ( select($("div#sinistra div.middle"),X) );
navigazione.Destra = funzione (X,Y) ( select($("div#destra div.middle"),X) );
navigazione.BottomLeft = funzione (X,Y) ( select($("div#left div.bottom"),Math.abs(X-Y)) );
navigazione.Bottom = funzione (X,Y) ( select($("div#center div.bottom"),Y) );
navigazione.BottomRight = funzione (X,Y) ( select($("div#right div.bottom"),Math.abs(X-Y)) );
}
selezione funzione(el,k) (
velocità variabile = 1500;
interruttore (vero) (
case (k mouse > impostazioni del dispositivo (scheda) > fai clic su Synaptics Lux Pad > fai clic su Impostazioni > fai clic su clic > fai clic sull'icona a forma di ingranaggio accanto a clic. Lì vedrai le impostazioni per abilitare/disabilitare il touchpad.
