Programiramo geste mišem. Geste miša i druge skrivene funkcije računalnog miša

25. veljače 2008. u 19:46 Programiranje pokreta mišem

• JavaScript

Mnogi korisnici Opere i FireFoxa znaju za postojanje takozvanih Mouse Gestures (za FF postoji istoimeni dodatak) - gesti miša na koje preglednik reagira izvođenjem raznih radnji (kao što je otvaranje novog prozora, bookmarks, back , naprijed, itd., itd.). itd.), jedini nedostatak ove značajke je to što nema interakcije s web-mjestom, pa sam odlučio napisati malu biblioteku koja će pomoći programerima da dodaju sličnu funkcionalnost na svoje web-mjesto. .

Trenutno knjižnica razumije samo 8 jednostavnih gesti:

• Gore - držite tipku miša i pomaknite kursor prema gore 50-200 piksela (prema zadanim postavkama) i otpustite, pomak duž X osi trebao bi biti najmanje dva puta manji. nego po Y osi
• Dno - pomaknite kursor prema dolje
• Pravo

I njihove izvedenice

• Gore-lijevo - pomak duž X i Y osi ne smije se razlikovati više od dva puta
• Gore desno
• Dolje lijevo
• Dolje desno

Za povezivanje knjižnice morat ćete dodati sljedeći kod na svoju stranicu:

Zatim kopirajte sljedeći kod:

// koristi jQuery za povezivanje funkcije s događajem

// postavljanje parametara
navigacija.minX = 50;
navigacija.minY = 50;
navigacija.maxX = 300;
navigacija.maxY = 300;
// funkcije povratnog poziva
navigacija.Gorelijevo = funkcija (X,Y) ( );
navigacija.Top = funkcija (X,Y) ( );
navigacija.Gore desno = funkcija (X,Y) ( );
navigacija.Lijevo = funkcija (X,Y) ( );
navigacija.Desno = funkcija (X,Y) ( );
navigacija.Doljelijevo = funkcija (X,Y) ( );
navigacija.Dno = funkcija (X,Y) ( );
navigacija.DoljeDesno = funkcija (X,Y) ( );

Ovo je predložak za naše "pokrete", prva dva retka potrebna su kako bismo priložili naše dvije funkcije globalnim događajima mousedown i mouseup (koristi se biblioteka jQuery). Sljedeća 4 reda označavaju parametre gesta, tj. granica unutar kojih će djelovati. Zatim slijedi deklaracija 8 funkcija povratnog poziva; one uzimaju apsolutne pomake duž X i Y osi kao parametre.

Kako bismo isključili lažne rezultate naših funkcija, bolje ih je vezati uz pritisnutu tipku “Ctrl” (kod tipke “Ctrl” je 17, ako ga želite promijeniti, pogledajte sve kodove na stranici http:/ /unixpapa.com/js/key.html):

$(prozor).keydown(funkcija(događaj)(
prekidač (event.keyCode) (
slučaj 17:
$(dokument).mousedown(navigation.mousedown);
$(dokument).mouseup(navigation.mouseup);
pauza;
}
});

prekidač (event.keyCode) (
slučaj 17:


pauza;
}
});

A ovako izgleda kod iz mog primjera:

funkcija mouseGestures())(
$(prozor).keydown(funkcija(događaj)(
prekidač (event.keyCode) (
//…
// različiti ključevi rade različite stvari
// Različiti preglednici daju različite kodove
// pogledajte ovdje za detalje: unixpapa.com/js/key.html
//…
slučaj 17:
$(dokument).mousedown(navigation.mousedown);
$(dokument).mouseup(navigation.mouseup);
pauza;
}
});
$(prozor).keyup(funkcija(događaj)(
prekidač (event.keyCode) (
slučaj 17:
$(dokument).unbind("mousedown");
$(dokument).unbind("mouseup");
pauza;
}
});

Navigacija.maxX = 300;
navigacija.maxY = 300;
navigation.TopLeft = funkcija (X,Y) ( select($("div#left div.top"),Math.abs(X-Y)) );
navigacija.Top = funkcija (X,Y) ( select($("div#center div.top"),Y) );
navigation.TopRight = funkcija (X,Y) ( select($("div#right div.top"),Math.abs(X-Y)) );
navigacija.Lijevo = funkcija (X,Y) ( select($("div#left div.middle"),X) );
navigacija.Desno = funkcija (X,Y) ( select($("div#right div.middle"),X) );
navigation.BottomLeft = funkcija (X,Y) ( select($("div#left div.bottom"),Math.abs(X-Y)));
navigacija.Dno = funkcija (X,Y) ( select($("div#center div.bottom"),Y) );
navigation.BottomRight = funkcija (X,Y) ( select($("div#right div.bottom"),Math.abs(X-Y)) );
}
odabir funkcije (el,k) (
var brzina = 1500;
prebaciti (istina) (
kućište (k miš > postavke uređaja (kartica) > kliknite na Synaptics Lux Pad > kliknite na Postavke > kliknite na klik > kliknite na ikonu zupčanika pokraj klika. Tamo ćete vidjeti postavke za omogućavanje/onemogućavanje dodirne podloge.