Deaktivací „gesta“ deaktivujete touchpad. Rozšíření gest pro Chrome a Firefox
25. února 2008 v 19:46 Programování gest myší- JavaScript
Mnoho uživatelů Opery a FireFoxu ví o existenci tzv. Mouse Gestures (pro FF existuje stejnojmenný plugin) - gest myši, na která prohlížeč reaguje prováděním různých akcí (např. otevření nového okna, záložky , zpět, vpřed atd. atd.) atd.), jedinou nevýhodou této funkce je, že nedochází k žádné interakci se stránkou, a rozhodl jsem se napsat malou knihovnu, která vývojářům pomůže takovou funkcionalitu na jejich stránky přidat ...
Na tento moment Knihovna rozumí pouze 8 jednoduchým gestům:
- Nahoře - podržte tlačítko myši a posuňte kurzor nahoru o 50-200 pixelů (ve výchozím nastavení) a uvolněte, posun podél osy X by měl být alespoň dvakrát menší. než osa y
- Dole - přesunutí kurzoru dolů
- Že jo
- Vlevo nahoře – posunutí podél os X a Y by se nemělo lišit více než dvakrát
- Vpravo nahoře
- vlevo dole
- vpravo dole
Dále zkopírujte následující kód:
// použití jQuery pro funkci vazby na událost
// nastavení parametrů
navigace.minX = 50;
navigace.minY = 50;
navigace.maxX = 300;
navigace.maxY = 300;
// funkce zpětného volání
navigace.Vlevo nahoře = funkce (X,Y) ( );
navigace.Nahoře = funkce (X,Y) ( );
navigace.Vpravo nahoře = funkce (X,Y) ( );
navigace.Vlevo = funkce (X,Y) ( );
navigace.Vpravo = funkce (X,Y) ( );
navigace.Vlevo dole = funkce (X,Y) ( );
navigace.Dole = funkce (X,Y) ( );
navigace.Vpravo dole = funkce (X,Y) ( );
Toto je příprava na naše „gesta“, první dva řádky jsou nutné k tomu, abychom zavěsili naše dvě funkce na globální události mousedown a mouseup (pomocí knihovny jQuery). Další 4 řádky označují parametry gest, tzn. limity, ve kterých budou pracovat. Dále následuje deklarace 8 funkcí zpětného volání, které jako parametry mají absolutní posun podél os X a Y.
Abychom se vyhnuli falešným pozitivům našich funkcí, je lepší je navázat na stisknutou klávesu „Ctrl“ (kód klávesy „Ctrl“ je 17, pokud jej chcete změnit – všechny kódy naleznete na stránce http:/ /unixpapa.com/js/key.html):
$(okno).keydown(funkce(událost)(switch(event.keyCode)(
případ 17:
$(document).mousedown(navigation.myšídol);
$(document).mouseup(navigace.mouseup);
přestávka;
}
});
switch(event.keyCode)(
případ 17:
přestávka;
}
});
A takto vypadá kód z mého příkladu:
funkce mouseGestures()($(okno).keydown(funkce(událost)(
switch(event.keyCode)(
//…
// různé klíče dělají různé věci
// Různé prohlížeče poskytují různé kódy
// podrobnosti naleznete zde: unixpapa.com/js/key.html
//…
případ 17:
$(document).mousedown(navigation.myšídol);
$(document).mouseup(navigace.mouseup);
přestávka;
}
});
$(okno).keyup(funkce(událost)(
switch(event.keyCode)(
případ 17:
$(document).unbind("myší");
$(document).unbind("mouseup");
přestávka;
}
});
Navigace.maxX = 300;
navigace.maxY = 300;
navigation.TopLeft = function (X,Y) ( select($("div#left div.top"),Math.abs(X-Y)) );
navigace.Top = funkce (X,Y) ( select($("div#center div.top"),Y) );
navigation.TopRight = function (X,Y) ( select($("div#right div.top"),Math.abs(X-Y)) );
navigace.Vlevo = funkce (X,Y) ( select($("div#left div.middle"),X) );
navigace.Vpravo = funkce (X,Y) ( select($("div#right div.middle"),X) );
navigation.BottomLeft = function (X,Y) ( select($("div#left div.bottom"),Math.abs(X-Y)) );
navigace.Bottom = funkce (X,Y) ( select($("div#center div.dole"),Y) );
navigation.BottomRight = function (X,Y) ( select($("div#right div.bottom"),Math.abs(X-Y)) );
}
funkce select(el,k) (
rychlost var = 1500;
přepínač(pravda)(
případ (k