Управление компьютером жестами мыши.

25 февраля 2008 в 19:46 Программируем жесты мышкой

• JavaScript

Многие пользователи Opera и FireFox знают о существовании так называемых Mouse Gestures (для FF существует одноименный плагин) - жестов мышкой, на которые реагирует браузер выполняя различные действия (такие как открытия нового окна, закладки, назад, вперед и т.д. и т.п.), единственный недостаток данной фичи - нет взаимодеймствия с сайтом, и я решил написать небольшую бибилотечку, которая поможет разработчикам добавить подобный функционал на свой сайт…

На данный момент бибилотека понимает только 8 простеших жестов:

• Top - зажимаем кнопку мышки и ведем курсор вверх на 50-200 пикселей (по умолчанию) и отпускаем, смещение по оси X должно быть минимум в два раза меньше. чем по оси Y
• Bottom - ведем курсор вниз
• Right

И их производные

• Top-Left - смещение по осям X и Y не должно различаться более чем в два раза
• Top-Right
• Bottom-Left
• Bottom-Right

Для подключения бибилотеки вам понадобиться добавить следующий код в вашу страницу:

Далее копируем следующий код:

// use jQuery for bind function to event

// set params
navigation.minX = 50;
navigation.minY = 50;
navigation.maxX = 300;
navigation.maxY = 300;
// callback functions
navigation.TopLeft = function (X,Y) { };
navigation.Top = function (X,Y) { };
navigation.TopRight = function (X,Y) { };
navigation.Left = function (X,Y) { };
navigation.Right = function (X,Y) { };
navigation.BottomLeft = function (X,Y) { };
navigation.Bottom = function (X,Y) { };
navigation.BottomRight = function (X,Y) { };

Это заготовка для наших «жестов», первые две строчки необходимы для того, чтобы повесить на глобальные события mousedown и mouseup наши две функции (используется бибилотека jQuery). Следующие 4 строчки указывают параметры жестов, т.е. лимиты в которых они будут срабатывать. Далее идет объявление 8 callback функций, в качестве параметров они принимают абсолютное смещение по оси X и Y.

Дабы исключить ложные срабатывания наших функций, лучше привязать их к нажатой клавиши «Ctrl» (код клавиши «Ctrl» равен 17, если хотите изменить - см. все коды на странице http://unixpapa.com/js/key.html):

$(window).keydown(function(event){
switch (event.keyCode) {
case 17:
$(document).mousedown(navigation.mousedown);
$(document).mouseup(navigation.mouseup);
break;
}
});

switch (event.keyCode) {
case 17:


break;
}
});

А вот так выглядит код из моего примера :

function mouseGestures(){
$(window).keydown(function(event){
switch (event.keyCode) {
//…
// different keys do different things
// Different browsers provide different codes
// see here for details: unixpapa.com/js/key.html
//…
case 17:
$(document).mousedown(navigation.mousedown);
$(document).mouseup(navigation.mouseup);
break;
}
});
$(window).keyup(function(event){
switch (event.keyCode) {
case 17:
$(document).unbind("mousedown");
$(document).unbind("mouseup");
break;
}
});

Navigation.maxX = 300;
navigation.maxY = 300;
navigation.TopLeft = function (X,Y) { select($("div#left div.top"),Math.abs(X-Y)) };
navigation.Top = function (X,Y) { select($("div#center div.top"),Y) };
navigation.TopRight = function (X,Y) { select($("div#right div.top"),Math.abs(X-Y)) };
navigation.Left = function (X,Y) { select($("div#left div.middle"),X) };
navigation.Right = function (X,Y) { select($("div#right div.middle"),X) };
navigation.BottomLeft = function (X,Y) { select($("div#left div.bottom"),Math.abs(X-Y)) };
navigation.Bottom = function (X,Y) { select($("div#center div.bottom"),Y) };
navigation.BottomRight = function (X,Y) { select($("div#right div.bottom"),Math.abs(X-Y)) };
}
function select(el,k) {
var speed = 1500;
switch (true) {
case (k