Как сделать контекстное меню в html

Обновлено: 08.07.2024

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

Я нацелен на то, что делает Google Docs. Он позволяет пользователям щелкнуть правой кнопкой мыши и показать пользователям свое собственное меню.

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

ОТВЕТЫ

Ответ 1

Отвечая на ваш вопрос - используйте событие contextmenu , как показано ниже:

Ответ 2

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

Ответ 3

Комбинация некоторых хороших CSS и некоторых нестандартных тегов html без внешних библиотек может дать хороший результат (JSFiddle)

HTML

Примечание: тег меню не существует, я его создаю (вы можете использовать что-либо)

CSS

JavaScript только для этого примера, я лично удаляю его для постоянных меню в окнах

Также обратите внимание: вы можете изменить menu > menu на menu > menu для меню, которое расширяется справа налево. Вам нужно будет добавить запас или что-то еще, но

Ответ 4

Вы можете просто заблокировать контекстное меню, добавив в свой тег body следующее:

Это заблокирует весь доступ к контекстному меню (не только правой клавишей мыши, но и с клавиатуры).

P.S. вы можете добавить это к любому тегу, который вы хотите отключить контекстное меню на

Отключит контекстное меню только в этом div

Ответ 5

В соответствии с ответами здесь и на других "потоках" я сделал версию, похожую на версию Google Chrome, с переходом css3. JS Fiddle

Давайте начнем eazy, так как у нас есть js выше на этой странице, мы можем беспокоиться о css и макете. Макет, который мы будем использовать, представляет собой элемент с элементом или шрифтом, удивительным значком ( ) и , чтобы показать быстрые клавиши. Итак, это структура:

Мы поместим их в div и покажем, что div щелкнуть правой кнопкой мыши. Пусть они будут выглядеть как в Google Chrome, не так ли?

Теперь мы добавим код из принятого ответа и получим значение X и Y курсора. Для этого мы будем использовать e.clientX и e.clientY . Мы используем клиент, поэтому необходимо отключить меню div.

И это все! Просто добавьте css-переходы, чтобы угаснуть и уйти, и сделали!

Ответ 6

Протестировано и работает в Opera 11.6, firefox 9.01, Internet Explorer 9 и chrome 17 Вы можете проверить рабочий образец в javascript right click menu

Ответ 7

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

Ответ 8

Ответ 9

Вот очень хороший учебник о том, как создать пользовательское контекстное меню с полным примером рабочего кода (без JQuery и других библиотек).

Вы также можете найти демонстрационный код на GitHub.

Они дают подробное пошаговое объяснение, которое вы можете выполнить, чтобы создать собственное контекстное меню контекстного меню (включая html, css и javascript code) и суммировать его в конце, указав полный пример кода.

Вы можете легко следовать и адаптировать его к своим потребностям. И нет необходимости в JQuery или других библиотеках.

Вот как выглядит их примерный код меню:

Ответ 10

Чистое решение JS и CSS для действительно динамического контекстного меню, вызываемого правой кнопкой мыши, хотя и на основе предварительно определенных соглашений об именах для элементов id, ссылок и т.д. Jsfiddle и кода, который вы можете скопировать, вставить в одну статическую HTML-страницу:

Ответ 13

Простым способом вы можете использовать onContextMenu для возврата функции JavaScript:

И, введя return false; , вы отмените контекстное меню.

Если вы все еще хотите отобразить контекстное меню, вы можете просто удалить строку return false; .

Ответ 14

Протестировано и работает в Opera 12.17, firefox 30, Internet Explorer 9 и chrome 26.0.1410.64

Ответ 15

В новом html 5.1 есть новая функция контекстного меню.

Ответ 16

Вы должны помнить, хотите ли вы использовать только решение Firefox, если вы хотите добавить его ко всему документу, вы должны добавить contextmenu="mymenu" в тег не к тегу body .
Вы должны обратить внимание на это.

Ответ 17

Ответ 18

Для этой цели вы, вероятно, должны использовать сторонний виджет пользовательского интерфейса.

Я рекомендую Shield UI Контекстное меню, которое является гибким и легко интегрированным компонентом для JavaScript и HTML5.

Ответ 19

только сегодня я нашел еще два хороших примера (я думаю):

DEMO 1// DEMO 2 (эта демонстрация нуждается в пользовательском интерфейсе jquery)

Я надеюсь помочь кому угодно, bb.

Ответ 20

Что я здесь делаю

  • Создайте собственное собственное меню div и установите положение: абсолютное и отображаемое: на всякий случай.
  • Добавить на страницу или элемент, который нужно щелкнуть по событию oncontextmenu.
  • Отмените действие браузера по умолчанию с возвратом false.

Пользователь js вызывает ваши собственные действия.

Ответ 21

Я использую что-то похожее на следующий jsfiddle

если вы нацелены на более старые браузеры IE, вы должны в любом случае дополнить его 'attachEvent; дело

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

Анализ интерфейса Medium

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

Контекстное меню обмена пользовательского интерфейса Medium

Если взглянуть, что находится под капотом через инструменты разработчика браузера Chrome, мы заметим, что положение меню определяется через свойства top и left встроенного стиля элемента. Мы можем заметить, что кнопка "поделиться" также имеет дополнительный класс-модификатор highlightMenu--active , который делает его видимым.

Примечание: Если вы еще не знакомы с терминами модификатор, блок и элемент, вам стоит посмотреть вот этот более ранний урок: введение в методологию БЭМ.

Стили, которые определяют положение контекстного меню в Medium

На вкладке Стили мы видим, что начальное положение устанавливается с помощью CSS через абсолютное позиционирование ( absolute ), значение z-index для поднятия выше других элементов на странице, свойство top и свойство visibility для вывода кнопок меню за пределы видимой зоны.

Таким образом, нам нужно будет:

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

Создаем контекстное меню

В этом примере, мы будем использовать кнопки Facebook и Twitter в нашем меню. Мы используем значки Facebook и Twitter в формате SVG, завернутые в тег button и несколько элементов div . Кроме того, как вы можете видеть из следующего фрагмента, мы также добавили элемент span для отображения треугольника в нижней части меню.

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

Стили, которые определяют начальное положение и видимость.

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

Делаем контекстное меню функциональным

На данный момент наше контекстное меню не должно быть видимым на странице. Кроме того, когда мы нажмем кнопку Twitter или Facebook, не видно, чтобы появилось диалоговое окно "поделиться". В этом разделе, мы будем писать JavaScript код, чтобы сделать наши кнопки функциональными. И мы начинаем с функции getHighlight() .

Эта функция служит для:

  • Получения выделенной области с помощью встроенной функции JavaScript getSelection() .
  • Возвращения объекта, содержащего выделенный текст, элемент, в котором находится текст и объект прямоугольника выбранной области, который содержит ее размер, а также ее позицию — top , bottom , left и right — в пределах страницы.

Наша следующая функция называется showMenu() . Как и предполагает название, эта функция будет выводить меню.

В частности код в этой функции выполняет следующие действия:

  1. Получает объект из функции getHighlighted() .
  2. Скрывает меню и возвращает его в исходное положение, когда выделенная область является пустой и не содержит текста.
  3. Предотвращает появление кнопок, если выделенный текст не находится в пределах абзаца.
  4. Наконец, задает позицию через значения top и left и добавляет класс sharing--show , чтобы сделать видимыми кнопки обмена. Я также добавил несколько строк комментариев, описывающих, откуда берутся некоторые из определяемых значений.

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

Выделение текста в Safari iOS

Мы устанавливаем задержку исполнения на 100ms с помощью функции setTimeout() , чтобы быть уверенным в точном завершении выделения.

Наша последняя функция, openShareWindow() , отвечает за запуск окна обмена при нажатии кнопки в меню. В этом уроке мы будем главным образом использовать это окно для того, чтобы поделиться в Twitter, поскольку Facebook имеет свой собственный JavaScript SDK.

Для кнопки Facebook мы используем Facebook JavaScript SDK. SDK позволяет нам передать текст для отображения в окне "поделиться" через параметр quote .

Twitter не предоставляет такой же JavaScript SDK. Так что, мы используем нашу функцию, openShareWindow() и передаем URL-адрес, отформатированный в соответствии с их правилами, а также передаем размер окна.

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

Подводя итоги

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

Дополнительные ресурсы

Существует несколько библиотек API JavaScript, которые мы использовали в работе нашего контекстного меню. Некоторые из них были упомянуты в предыдущих уроках на Envato Tuts+, в то время как другие могут быть совершенно новым для вас. Так что дополню этот урок некоторыми ссылками.

Я хочу добавить пользовательское меню правой кнопки мыши в свое веб-приложение. Можно ли это сделать без использования каких-либо готовых библиотек? Если да, то как отобразить простое пользовательское меню, вызываемое правой кнопкой мыши, в котором не используется сторонняя библиотека JavaScript?

Я стремлюсь к чему-то вроде того, что делает Google Docs. Это позволяет пользователям щелкать правой кнопкой мыши и показывать пользователям их собственное меню.

ПРИМЕЧАНИЕ. Я хочу узнать, как создать свой собственный продукт по сравнению с тем, что кто-то уже сделал, поскольку большую часть времени эти сторонние библиотеки раздуты с функциями, тогда как мне нужны только те функции, которые мне нужны, поэтому я хочу, чтобы они были полностью сделаны вручную. меня.

только сегодня я нашел еще два хороших примера (я думаю) по этому поводу: DEMO 1 // DEMO 2 (это демо нужно для jquery UI ).

Просто хочу отметить, что контекстное меню HTML5 поддерживается только в некоторых версиях Firefox, и, насколько я могу судить, ничто другое не поддерживает его. Chrome версии 61 не поддерживает его.

Для людей, использующих React - native-menu копирует все существующие функции (копирование, открытие в новой вкладке, поиск в Google и т. Д.), Хотя выглядит нативно (применяет различные стили в зависимости от браузера). Демо

ContextMenu вызывается по клику на правую кнопку мыши. Компонент ContextMenu наследуется от Window и List и выглядит как Menu.


Инициализация

1. Самый простой способ инициализировать контекстное меню - это создать конструктор "contextmenu" и добавить в него массив с опциями меню. Кроме строковых значений опций, массив также может содержать темплейты:

  • < $template:"Spacer" >- добавляет промежуток между опциями;
  • < $template:"Separator" >- добавляет тонкую линию между опциями.

2. Чтобы создать многоуровневое контекстное меню, задайте опции как массив объектов. Каждый объект может содержать следующие свойства:

  • value (string) - название опции меню;
  • submenu (array) - массив с опциями для подменю.

Добавить ContextMenu к элементу на странице

ContextMenu можно добавить к любому компоненту Webix или элементу HTML. Существует два способа добавить контекстное меню:

1. с помощью свойства master

Вы можете слинковать контекстное меню как с объектом компонента, так и с контейнером HTML.

2. с помощью метода attachTo

В коде ниже пример добавления контекстного меню в таблицу:

Метод принимает ID элементов HTML и объекты компонента, например:

Для некоторых компонентов, например List, также необходимо включить свойство onContext:


Работа с ContextMenu

Получить Value элемента

Вы можете отслеживать клики по опциям контекстного меню, задав обработчик событию onMenuItemClick:

Получить мастер компонент (элемент, по клику на который открывается контекстное меню)

Мастер компонент или элемент HTML может быть возвращен с методом getContext, например:

Статьи по теме

If you have not checked yet, be sure to visit site of our main product Webix js framework and page of context menu javascript product.

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