2 что такое контекстное меню и как его вызвать

Обновлено: 05.07.2024

Если верить Википедии, контекстное меню — меню, появляющееся при взаимодействии пользователя с графическим интерфейсом (при нажатии правой кнопки мыши). Контекстное меню содержит ограниченный набор возможных действий, который обычно связаны с выбранным объектом.

На вашем компьютере клик правой кнопкой мыши на рабочем столе вызовет контекстное меню операционной системы. Отсюда вы, вероятно, можете создать новую папку, получить какую-то информацию и сделать что-нибудь еще. Контекстное меню в браузере позволяет, например, получить информацию о странице, посмотреть ее исходники, сохранить изображение, открыть ссылку в новой вкладке, поработать с буфером обмена и всякое такое. Причем набор доступных действий зависит от того, куда именно вы кликнули, то есть от контекста. Это стандартное поведение, закладываемое разработчиками браузера [И расширений к нему].

Веб-приложения постепенно начинают заменять стандартные контекстные меню своими собственными. Отличными примерами являются все те же Gmail и Dropbox. Вопрос лишь в том, как сделать свое контекстное меню? В браузере при клике правой кнопкой мыши срабатывает событие contextmenu. Нам придется отменить поведение по умолчанию и сделать так, чтобы вместо стандартного меню выводилось наше собственное. Это не так уж сложно, но разбираться будем пошагово, так что выйдет довольно объемно. Для начала создадим базовую структуру приложения, чтоб разрабатываемый пример не был совсем уж оторван от реальности.

Цепляем события к пунктам контекстного меню

Если ваше приложение сложнее данного примера, и у вас планируется динамическое содержимое контекстного меню, придется подробнее вникнуть в происходящее далее, чтобы самому додумать недостающие детали. В нашем приложении все проще, и есть всего одно меню с постоянным набором действий. Таким образом, можно быстро проверить, какой именно элемент был выбран, и обработать этот выбор. В нашем примере просто сохраним выбранный элемент в переменную и запишем в консоль его data-id и выбранное действие. Для этого отредактируем разметку меню:

Далее давайте закэшируем все нужные объекты:

Появилась переменная taskItemInContext, которой присваивается значение при правом клике по элементу списка. Она нам потребуется для логирования ID элементов. Также появились новые имена классов. Теперь пройдемся по функциональности.

Функция инициализации остается такой же. Первое изменение затрагивает contextListener, ведь мы хотим сохранять в taskItemInContext элемент, на который кликнул пользователь, а функция clickInsideElement как раз его и возвращает:

Мы сбрасываем ее в null, если правый клик произошел не по элементу списка. Ну и возьмемся за clickListener. Как я упоминал ранее, для простоты мы просто будем выводить информацию в консоль. Сейчас при отлавливании события click производится несколько проверок и меню закрывается. Внесем коррективы и начнем обрабатывать клик внутри контекстного меню, выполняя некоторое действие и лишь после этого закрывая меню:

Вы могли заметить, что вызывается функция menuItemListener. Ее мы определим чуть позже. Функции keyupListener, resizeListener и positionMenu оставляем без изменений. Функции toggleMenuOn и toggleMenuOff отредактируем незначительно, изменив имена переменных для лучшей читаемости кода:

Наконец реализуем menuItemListener:

На этом разработка функциональности заканчивается.

Совместимость с браузерами

  • Chrome 39
  • Safari 7
  • Firefox 33

Рефакторинг нашего кода

  1. contextmenu — Проверка состояния и раскрытие контекстного меню.
  2. click — Скрытие меню.
  3. keyup — Обработка нажатий клавиш. В данном руководстве интересна только ESC.
  1. Само проверяемое событие.
  2. Имя класса для сравнения. Если событие произошло внутри элемента, имеющего указанный класс, или родитель этого элемента имеет такой класс, то нужно вернуть этот элемент.

Вернемся и отредактируем contextListener:

Имея вспомогательную функцию, делающую за нас часть грязной работы, и отлавливая событие contextmenu на всем документе, мы можем теперь закрывать меню при клике вне его. Для этого добавим функцию toggleMenuOff и отредактируем contextListener:

Теперь нажмите правой кнопкой по элементу списка. А после — где-нибудь в другом месте документа. Вуаля! Наше меню закрылось и открылось стандартное. Затем сделаем нечто похожее самое для события click, чтобы не от одной правой кнопки оно закрывалось:

Этот кусок кода несколько отличается от предыдущего, потому что Firefox. После того, как правая кнопка мыши отжата, в Firefox срабатывает событие click, так что здесь нам приходится дополнительно убеждаться, что произошел действительно клик левой кнопкой. Теперь меню не моргает при правом клике. Давайте добавим похожий обработчик и на нажатие клавиши ESC:

Мы получили меню, которое открывается и закрывается как задумано, взаимодействующее с пользователем естественным образом. Давайте наконец отпозиционируем меню и попробуем обрабатывать события внутри него.

Разворачиваем наше контекстное меню — JavaScript

Начнем с того, что посмотрим, как зарегистрировать событие contextmenu. Откроем самовыполняющуюся функцию и отловим событие на всем документе. Также будем логировать событие в консоль, чтобы получить какую-то информацию:

  1. Потребуется цикл по всем элементам списка задач и добавление обработчика события contextmenu к каждому из них.
  2. Для каждого обработчика отменим стандартное поведение.
  3. Будем логировать в консоли событие и элемент, к которому оно относится.

Если заглянуть в консоль, можно увидеть, что уникальное событие срабатывает при каждом нажатии на элемент из списка задач. Теперь помимо отмены поведения по умолчанию реализуем отображение контекстного меню, добавляя к нему вспомогательный класс.

Но для начала давайте добавим к меню ID, чтобы его проще было получать посредством JS. Также добавим переменную состояния меню menuState и и переменную с активным классом. Получились три переменных:

Едем дальше. Пересмотрим функцию contextMenuListener и добавим toggleMenuOn, отображающую меню:

На данный момент правой кнопкой мыши уже можно вызвать наше контекстное меню. Но нельзя сказать, что оно работает правильно. Во-первых, оно находится совсем не там, где хотелось бы. Для устранения проблемы понадобится немного математики. Во-вторых, закрыть это меню пока невозможно. С учетом того, как работают обычные контекстные меню, хотелось бы, чтоб наша его реализация закрывалась при клике не меню и при нажатии Escape. Помимо этого при правом клике вне нашего меню оно должно закрыться, а вместо него требуется открытие меню по умолчанию. Давайте попробуем все это решить.

Что такое контекстное меню?

Из этой информационной статьи вы узнаете о том, как вызвать контекстное меню для любого файла, папки, ярлыка и т.п используя для этого несколько различных способов.

Контекстное меню, это перечень доступных команд которые зависят от выбранного в данный момент объекта. Папки, файлы, рабочий стол или всевозможные программы, с которыми каждый из пользователей работает ежедневно, почти все они обладают контекстным меню имеющим свое отличие в количестве пунктов, а значит и возможностей.

Позиционирование нашего контекстного меню

С учетом текущих HTML и CSS, наше меню отображается в нижней части экрана. Но нам-то хотелось бы, чтоб оно появлялось там, где произошел клик. Давайте исправим сие досадное упущение. Во-первых, добавим еще одну вспомогательную функцию, получающую точные координаты клика. Назовем ее getPosition и попробуем заставить обрабатывать разные причуды браузеров:

Наш первый шаг в позиционировании меню — подготовка трех переменных. Добавим их в соответствующий блок кода:

Создадим функцию positionMenu, принимающую единственный аргумент — событие. Пока что пусть она выводит координаты меню в консоль:

Отредактируем contextListener, чтобы начать процесс позиционирования:

Снова повтыкайте в контекстное меню и загляните в консоль. Убедитесь, что позиция действительно доступна и логируется. Мы можем использовать встроенные стили для задания свойств top и left посредством JS. Вот и новая версия positionMenu:

  1. Что будет, если пользователь кликнет близко к правому краю окна? Контекстное меню выйдет за его пределы.
  2. Что делать, если пользователя меняет размеры окна при открытом контекстном меню? Возникает та же проблема. Dropbox решает эту проблему скрытием переполнения по оси x (x-overflow: hidden).

Как вы помните, по умолчанию наше меню скрыто, так что нельзя просто взять и посчитать его размеры. В нашем случае меню статическое, но при реальном применении его содержимое может меняться в зависимости от контекста, так что рассчитывать ширину и высоту лучше в момент открытия. Получим нужные величины внутри функции positionMenu:

Введем еще две переменных, но на этот раз для размеров окна:

Посчитаем их значения похожим образом:

В конечном счете давайте предположим, что хотим показывать меню не ближе, чем в 4 пикселях от края окна. Можно сравнить значения, как я говорил выше, и скорректировать позицию как-то так:

Сейчас наше меню ведет себя совсем хорошо. Осталось что-то сделать с ресайзом окна. Я уже говорил, как поступает Dropbox, но вместо этого мы будем закрывать контекстное меню. [Такое поведение куда ближе к стандартному] Добавим в функцию init следующую строку:

И напишем саму функцию:

Большой вопрос

Как добавить свой пункт в контекстное меню рабочего стола?

1. С помощью редактора реестра:

Редактор реестра мы с вами не так давно рассматривали. Там много интересного, но если вы неопытный пользователь ПК, то советую особо туда не лезть, так как можно легко нарушить работоспособность всей операционной системы.

Мы с вами сейчас для примера добавим в контекстное меню рабочего стола пункт, который будет открывать с помощью браузера Google Chrome страницу на сайте Яндекс.Дзен канала "У дяди Васи".

Чтобы открыть редактор реестра достаточно ввести в строку поиска меню "Пуск" команду " regedit ".

Сразу откроется диалоговое окно редактора.

Сейчас нам понадобится открыть ветку HKEY_CLASSES_ROOT

Далее в открывшейся ветке находим раздел DesktopBackground

И находим подраздел под названием Shell

Вот как раз сейчас в данном разделе мы и будем с вами творить. Правой кнопкой мыши нажимаем по подразделу Shell, далее выбираем пункт "Создать", потом - "Раздел".

Новому разделу вы можете присвоить любое имя латинскими буквами, главное чтобы вам было понятно что там. В нашем случае мы назовем его «Chrome», так как именно данный браузер будет выполнять команду.

Снова нажимаем правой кнопкой мыши по созданному разделу Chrome, выбираем пункт "Создать", далее - "Строковый параметр".

Называем его MUIVerb - этот параметр отвечает за отображение имени нового пункта в контекстном меню. Нажимаем левой кнопкой мыши на созданном параметре и указываем в строке "Значение" название пункта меню на русском или английском языках. В нашем случае он будет называться "У дяди Васи".

Можете проверить название пункта уже появилось в контекстном меню рабочего стола, но не работает, так как мы еще не задали действие, которое нужно производить по нажатию на данный пункт.

Список задач

Пример результата есть на CodePen. Можете заглянуть туда сразу, если лень читать или хотите убедиться, что действительно заинтересованы в дальнейшем чтении. Ну а пока приступим к пошаговой разработке задуманного. Я буду использовать некоторые современные фишки CSS и создам простейший список задач на data-атрибутах. Также воспользуюсь сбросом стилей от Эрика Мейера и сброшу свойство box-sizing для всех элементов в border-box:

Я не буду использовать префиксы в CSS, но в демо на CodePen включен автопрефиксер.

Заключение и демо

Если вы тщательно все обдумали и уверены, что такая функциональность нужна вашему приложению, вы можете использовать разработанное меню. Конечно, оно может потребовать каких-либо изменений, но данное руководство подробно описывает процесс разработки, так что реализовывать свои поправки должно быть не так сложно.

Кодовая база этого руководства залита на GitHub и будет поддерживаться и, возможно, обновляться в течение долгого времени. А полное рабочее демо можно потыкать на CodePen.

Экспериментируем с контекстным меню Windows (добавляем пункты).

Когда я выезжаю на заявки по настройке операционной системы Windows, то часто замечаю то, что очень многие пользователи не умеют работать с контекстным меню, точнее не знают как сделать его максимально удобным. Бывают ситуации, когда нажимаешь правую кнопку мышки, а там выпадает целый свиток из ненужных или повторяющихся команд.

Поэтому я решил, что моими последними статьями в 2018 году будут именно статьи про контекстное меню.

Контекстное меню - это всплывающее меню, которое появляется при нажатии правой кнопки мыши в любой навигационной области экрана (доступ можно получить в папках, на панели задач, в веб-браузерах и других областях графического интерфейса). Оно не является эксклюзивной особенностью Windows, поэтому присутствует и в операционных системах от других разработчиков.

Как вызвать контекстное меню?

Для этого нужно просто щелкнуть правой кнопкой мыши по выбранному объекту, а вот в сочетании клавиш Shift+F10 вызывается меню активного в данный момент окна или просто нажимаем клавишу вызова контекстного меню (про эту клавишу и другие полезные сочетания клавиш можно прочитать в этой статье).

Если кликнуть по рабочему столу в свободном месте ПКМ (правой кнопкой мыши), то появиться меню, с имеющимися в нем разделами и если кликнуть по файлу, то возникнут уже свои другие разделы, также и ярлык будет иметь личные отличия в пунктах и т.д.

Вот собственно в чем и заключается контектность, то есть состав разделов меняется от определенного вида объекта.

Расширенное контекстное меню

Для его вызова зажимаем клавишу Shift и кликаем правой кнопкой мыши по выбранному объекту отчего список возрастет на несколько пунктов в отличии от обычного вызова.

В приведенном примере можно пронаблюдать эти отличия. На левом скриншоте стандартный вызов правой кнопкой по объекту, а на правом скриншоте расширенный вызов, где прибавилась вкладка вызова командной строки (cmd.exe).

как вызвать контекстное меню

При сочетании клавиши Shift+клик ПКМ меню всегда будет расширяться от одного до нескольких новых пунктов, что может быть весьма полезно в отдельных случаях.
Также хочу обратить ваше внимание на то, что некоторые вкладки имеют по правой стороне небольшую стрелочку если навести на нее курсор то всплывет дополнительное подменю с перечнем из дополнительных вкладок.

как вызвать контекстное меню


Для расширения функций контекстного меню рабочего стола существуют специальные сторонние утилиты которые могут добавлять новые пункты, например можно добавить какие — то программы и запускать их оттуда для того, чтобы не загромождать рабочий стол ярлыками, лично я считаю это не очень то нужно.

Также есть утилиты, наоборот, по удалению не нужных пунктов из меню которые могут остаться от какой-то прошлой давно удаленной программки вот такая утилита может быть полезна.

Все эти утилиты, если они вам вдруг понадобятся можно без труда найти в сети Интернет.

Конечно, все действия по удалению или добавлению можно произвести через реестр компьютера, но этот способ уже совсем не для новичка.
И напоследок посмотрите коротенькое видео руководство по данной теме, я же с вами на этом прощаюсь.

Приводим наше меню в порядок — CSS

Уже была упомянута необходимость абсолютного позиционирования разрабатываемого меню. Кроме того, установим свойство z-index в 10. Не забывайте, что в вашем приложении может потребоваться другое значение. Это не все возможные стили, в демке наведены прочие красивости, но они уже зависят от ваших потребностей и не являются обязательными. Прежде чем переходить к JS, сделаем меню невидимым по умолчанию и добавим дополнительный класс для его отображения.

Контекстное меню - свои приложения ┤ч.1├

В серии из нескольких статей рассмотрим каким образом можно настроить под себя контекстное меню Windows ( ПКМ - она же правая кнопка мыши по какому-либо элементу программы или рабочего стола ) для удобства и быстрого доступа к любым нужным вам приложениям и утилитам.

Конечно операционная система Windows это не Linux и здесь не так уж и много открыто настраиваемых под себя вещей, которые были бы доступно понятны каждому. Поэтому я решил рассказать о том, как можно немного персонализировать вашу систему под вас.

💾Зачем оно надо

Кому как, ну а как по мне, встречал пользователей с полностью забитым ярлыками рабочим столом. Такое вызывает только ужас. Безусловно можно настроить красиво рабочий стол и сгруппировать любые значки на нём, но контекстное меню позволяет организовать доступ к нужным утилитам и программам проще, удобнее и эргономичнее.

Вы спросите, что можно закреплять самые часто используемые программы на панели задач, благо, начиная с Windows 7 это стало возможным и будете правы, однако всегда хорошо иметь альтернативу или хотя бы знать о ней.

💾Вперёд к делу

Поскольку встроить в контекстное меню можно практически что угодно, от системных апплетов и утилит до любых пользовательских программ, то рекомендую создать некий набор утилит под себя и набор самых часто используемых программ, можно разделить их на несколько категорий, но об этом в следующем выпуске.

Проводить все операции будем через системный реестр. Бояться чего-либо не стоит, т.к. все последующие действия полностью безопасны при условии точного их выполнения.

Открываем реестр Windows любым удобным вам способом. Например, используем поиск, введя реестр в Windows 10. Можно так же вызвать Выполнить сочетанием Win + R и ввести там regedit . Лучше открывать программу от имени администратора.

Некоторые замечания

  1. На протяжении всей статьи я упоминал правый клик как событие для открытия контекстного меню. Не все являются правшами и не у всех выставлены стандартные настройки мыши. Но вне зависимости от этого, событие contextmenu действует именно в соответствии с настройками мыши, а не привязано жестко к именно правой кнопке.
  2. Еще один важный момент заключается в том, что мы рассмотрели только полноценные настольные веб-приложения с мышью в качестве устройства ввода. Пользователи могут пользоваться клавиатурой или мобильными устройствами, поэтому не забудьте предусмотреть альтернативные способы взаимодействия для сохранения дружественного интерфейса.

Создание базовой структуры

Откроем наш HTML-документ, накидаем шапку, контентную часть с некоторым списком задач и подвал. Я также подтяну Font Awesome и шрифт Roboto, чтобы сделать оформление немного лучше. Каждая задача должна содержать атрибут data-id, который в реальности брался бы из БД. Также каждая задача будет содержать список действий. Вот важные части разметки:

Если вы используете CodePen, можете в настройках включить автопрефиксер и подключение CSS-сброса. В противном случае придется делать все руками, если еще не автоматизировали этот процесс. Не забывайте, что наша цель — создание контекстного меню, так что обработка действий не будет реализована. А теперь давайте добавим еще немного CSS:

Полный набор стилей (да и всего остального) представлен на CodePen. А здесь будут самые важные части кода, разметки и оформления. Но давайте уже наконец приблизимся к нашему контекстному меню.

Набросаем наше контекстное меню — разметка

  1. Просмотр задачи.
  2. Редактирование задачи.
  3. Удаление задачи.
  1. Мы хотим, чтобы контекстное меню появлялось там, где был выполнен правый клик, то есть ему нужно абсолютное позиционирование. Поэтому не стоит его разметку помещать в контейнер с относительным позиционированием.
  2. Нам потребуются какие-нибудь переменные или атрибуты, чтобы можно было определить, к какой задаче относится выбранное действие.

Читайте также: