Браузеры являются одними из немногих программ, которые могут поддерживать, кроме горячих клавиш, оперативное управление отдельными командами с помощью так называемых жестов мышью – несложных движений мышкой с зажатой ее правой клавишей. Управление с помощью жестов мышью, как правило, предусматривает небольшой набор распространенных команд браузера типа открытия и закрытия вкладки, обновления веб-страницы, навигации по открытым вкладкам и т.п. Не все браузеры поддерживают жесты мышью в рамках своих штатных возможностей, но многие из них можно наделить таким функционалом с помощью встраиваемых расширений. Такие расширения имеются в магазинах Google Chrome и Mozilla Firefox, а это значит, что поддержку жестов мышью можно внедрить в большую часть представителей рынка браузеров – в многочисленные продукты на базе Chromium и движка Gecko. Жесты мышью, видимо, настолько актуальный функционал, что расширение, добавляющее эту функцию, представлено среди немногочисленного ассортимента расширений для браузера Microsoft Edge в Windows 10 Anniversary Update. Причем его место в числе первых, а это на момент написания статьи первые двенадцать расширений, определил не какой-нибудь малоизвестный сторонний разработчик, а сама компания Microsoft, после неудачного эксперимента с Windows 8 принявшая за правило прежде создания какого-нибудь продукта выявлять потребности своей аудитории.
Ниже рассмотрим функционал по использованию жестов мышью в популярных браузерах Opera, Яндекс.Браузер, Google Chrome, Mozilla Firefox и Microsoft Edge.
1. OperaФункция жестов мышью в браузере Opera предустановлена и активна по умолчанию. Чтобы получить справку о конкретных командах, которые можно отдавать Опере движениями мышки с зажатой правой клавишей, отправляемся в раздел настроек. Жмем «Меню» – «Настройки». В поисковое поле настроек вводим ключевой запрос «жесты» и проверяем (на всякий случай), активна ли опция «Включить жесты мышью». Возле этой опции жмем ссылку с надписью «Подробнее».
В новой вкладке откроется справочная информация по работе с браузером, где в разделе «Навигация с помощью жестов мышью» будут указаны поддерживаемые команды и соответствующие им движения мышкой.
В настройках Opera ниже опции включения/отключения жестов мышью имеется другая опция, неактивная по умолчанию. Активировав ее – опцию «Включить сочетания кнопок мыши», получим возможность команды «Назад» и «Вперед» для соответствующих передвижений по истории вкладки отправлять даже не движениями мышки, а просто чередой кликов ее клавиш. Зажатая правая клавиша мыши, отпущенная чуть позже зажатия левой клавиши, вернет веб-страницу на шаг назад. А действие наоборот – зажатие левой клавиши и ее отпускание чуть позже зажатия правой клавиши – будет выполнять шаг вперед.
Яндекс.Браузер, как и Opera, также в числе штатного функционала содержит функцию управления жестами мышью. И она также активна по умолчанию. Чтобы просмотреть справку о конкретных жестах мышью, открываем «Настройки» браузера.
В поисковое поле раздела настроек вводим ключевой запрос «жесты» и проверяем, чтобы была активна опция «Жесты мыши». Далее жмем ссылку с надписью «Подробнее».
Откроется справка Яндекс.Браузера с активным разделом «Управление движением мыши», где будут описаны и иллюстрированы все поддерживаемые жесты мышью.
Как и Opera, Яндекс.Браузер также позволяет оперативно передвигаться по истории вкладки чередой зажатия клавиш мышки.
Расширения, адаптирующие браузер под управление с помощью жестов мышью, могут предложить большую функциональность, нежели штатный функционал Opera и Яндекс.Браузер. Не все из расширений могут похвастаться внушительным перечнем поддерживаемых жестов, но большинство как минимум предусматривает возможность пользовательской настройки соответствия команд браузера жестам мышью. И поскольку оба браузера – и Opera, и Яндекс.Браузер – могут работать с расширениями из магазина Google Chrome, в любой момент их штатную функцию жестов мышью можно отключить и установить более функциональное расширение для этих целей. Например, то, что будет рассмотрено в следующем пункте статьи.
3. Google ChromeВ магазине браузера Google Chrome представлено несколько расширений, предназначенных для реализации функции жестов мышью. Одно из них – расширение с заурядным названием «Жесты мышью» . Оно русифицировано, очень простое и как нельзя лучше подойдет для освоения этой функции. После установки расширения его кнопка будет внедрена на панель инструментов Chrome. При клике по кнопке расширения получим доступ к его параметрам,
где сможем просмотреть предустановленные жесты и при необходимости перенастроить их под свои предпочтения.
Расширение примечательно парой жестов для мгновенного перемещения вверх и вниз веб-страницы. Зажатая правая клавиша мыши и прокрутка колеса к соответствующей границе намного эффективнее неудобно расположенных на клавиатуре клавиш Home и End. Ведь такой веб-элемент, как кнопка «Вверх», не говоря уже о редко встречающейся кнопке «Вниз», присутствует не на всех сайтах. Из числа прочих полезных функций – возможность сброса настроек, экспорт-импорт настроек в файл.
Функцией экспорта-импорта настроек, если таковые проводились, не стоит пренебрегать. Сервис синхронизации Chrome умеет переносить установленные в рамках использования аккаунта Google расширения. Более того, синхронизируется даже статус их активности. Но вот настройки каждого отдельного расширения Chrome пока что синхронизировать не умеет.
4. Mozilla FirefoxРассмотренное в предыдущем пункте статьи расширение «Жесты мышью» имеется и в магазине браузера Mozilla Firefox . После установки расширения отправляемся в раздел дополнений браузера, куда, в частности, можно попасть, прописав в адресной строке:
В разделе дополнений Firefox переключаемся на подраздел «Расширения» и жмем кнопку «Настройки» в графе расширения «Жесты мышью».
Расширение идентично тому, что создано для Google Chrome: оно также предусматривает пользовательские настройки и их экспорт-импорт.
Firefox, как и Chrome, также не достиг совершенства в плане синхронизации настроек каждого установленного расширения.
5. Microsoft Edge (Anniversary Update)Если Windows 10 обновлена до Anniversary Update, в штатный браузер Microsoft Edge добавить расширение для реализации функции жестов мышью можно таким путем:
- В меню выбираем «Расширения»;
- Далее жмем ссылку перехода в Windows Store;
- Устанавливаем расширение «Действия с помощью мыши»;
- Включаем расширение.
Перечень поддерживаемых жестов откроется при нажатии кнопки расширения, которая после его установки появится в меню Microsoft Edge.
Расширение «Действия с помощью мыши» – редкий случай, когда компания Microsoft сделала дополнительный продукт к своему продукту основному лучше, чем сторонние разработчики. Перечень поддерживаемых жестов мышью для Microsoft Edge больше тех, что могут предложить отдельные расширения в магазинах Chrome и Firefox. Microsoft даже позаботилась об этапе усвоения соответствия команд браузера движениям мышью: расширение устанавливается с изначально активной опцией «Включить действия, выполняемые с помощью ручки Surface Pro», которая отрисовывает каждое движение мышки с зажатой ее правой клавишей, способствуя тем самым запоминанию соответствий через визуальный канал восприятия.
Управление с помощью жестов мышью существенно ускоряет веб-серфинг. Это как в случае со слепой печатью, только перевести на уровень подсознания несколько соответствий команд браузера движениям мышки гораздо проще и быстрее, чем научиться оперативно набирать текст, не задумываясь и не глядя на клавиатуру. Да и сама по себе компьютерная мышь – это устройство, которое любой более-менее опытный пользователь чувствует уже как продолжение своей руки. Однако у этой фичи есть недостатки.
Во-первых, это ограниченная зона для выполнения жестов. Выполнять движения можно не в любом месте веб-страницы, есть такие зоны, что сколько не рисуй жест, а все-равно получишь контекстное меню. Эти зоны обусловливает специфика дизайна каждого отдельного сайта. Жесты мышью могут не работать даже для отдельных сайтов целиком. Например, парадоксальный случай: рассмотренное для Chrome расширение не работает на сайте магазина этого браузера.
Во-вторых, некорректную работу функции жестов мышью может обуславливать специфика устройства самой мыши. Например, браузер Opera честно предупреждает о возможных проблемах при использовании Magic Mouse и Magic Trackpad от Apple.
В-третьих, отсутствие единых стандартов. При переходе на другой браузер жесты мышью нужно будет переучивать, что гораздо сложнее запоминания с нуля. Впрочем, это же можно отнести и к функционалу горячих клавиш.
Отличного Вам дня!
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
