Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Html context menu

Создание контекстных меню на HTML5

Дата публикации: 2014-05-27

От автора: Контекстные меню – это не столь известная возможность спецификации HTML5. Они позволяют вам добавлять собственные пункты в меню, которое появляется, когда пользователь нажимает правую кнопку мыши, находясь на странице. Используя JavaScript, вы можете управлять действиями, которые произойдут, если один из этих пунктов меню будет выбран.

В этом посте, вы узнаете, как создавать собственные контекстные меню, используя элементы menu и menuitem.

Перевод выполнила: Валерия Заруцкая

Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

Поддержка браузеров для HTML5 Контекстных Меню

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

Элементы menu и menuitem

Контекстные меню на HTML5 создаются с помощью двух элементов – menu и menuitem. Элемент menu имеет некоторое количество атрибутов, которые отвечают за то, как он будет отображен в браузере.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Атрибут type используется для того, чтобы обозначить, что мы создаем контекстное меню. Это важно, т.к. элемент menu может использоваться для разметки других типов меню. Обязательно задавайте атрибут id элементу menu, иначе вы не сможете использовать меню на странице (об этом далее). Атрибут label может быть задан вложенным элементам menu, для того чтобы текст отображался в главном контекстном меню. Аналогично, атрибут icon может использоваться для обозначения местонахождения иконки, которая будет показана рядом с текстом во вложенном меню.

Создание элементов меню

Элемент menuitem используется для создания элементов меню. Атрибут label должен содержать текст, который вы хотите показать в меню. Вы также можете по желанию задать атрибут icon вместе с указанием расположением картинки, которая будет показана рядом с текстом из атрибута label.

Действие, которое будет совершать пункт меню, определяется с помощью JavaScript. Вы можете использовать атрибут onclick, чтобы задать этот JavaScript код непосредственно элементу menuitem. Заметка: Я не большой фанат использования атрибута onclick для определения хэндлеров событий, но я не смог добиться того, чтоб это работало при использовании подхода фонового JavaScript.

Привязка контекстных меню

Когда вы создали контекстное меню, вам нужно привязать его к элементу на странице. Ваше меню будет видно только тогда, когда пользователь нажимает правую кнопку мыши на этом элементе. Вы можете привязать меню, поместив в значение атрибута contextmenu желаемого элемента значение id вашего элемента menu.

Если вы хотите, чтобы меню появлялось независимо от того, в каком участке страницы пользователь нажал правую кнопку мыши, вы можете привязать меню к тэгу body.

Вложенные меню

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Вложенные контекстные меню

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

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

Демо контекстного меню

Контекстное Меню на HTML5

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

В этом случае, мы используем стандартный элемент div, в качества объекта для события клика.

Заключение

Хотя я могу вспомнить несколько оправданных примеров использования контекстных меню на HTML5 (управление внутри игры – пауза, рестарт, и т.д.), я беспокоюсь, что возможность вторгаться в интерфейс браузера может эксплуатироваться. Подумайте о наличии возможности реализовать методы управления не через контекстные меню, а другой интерфейс. Мы берем на себя риск засорить контекстное меню и запутать пользователя, если не будем относиться к данному функционалу ответственно.

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

Автор: Matt West

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как добавить пользовательское контекстное меню на веб-страницу?

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

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

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

18 Ответов

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

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

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

HTML : contextmenu.html

CSS: contextmenu.css

JS: contextmenu.js-используется из принятого ответа

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

HTML

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

CSS

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

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

Читать еще:  Data content html

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

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

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

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

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

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

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

Мы поместим их в div и покажем этот div на правой кнопке мыши. Давайте оформим их, как в Google Chrome, не так ли?

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

И это все! Просто добавьте css перехода, чтобы исчезать и исчезать, и готово!

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

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

Вы также можете найти их демо-код на GitHub .

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

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

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

Чисто JS и css решение для действительно динамического контекстного меню правого клика, хотя и основанное на заранее определенных соглашениях именования для идентификаторов элементов, ссылок и т. д. jsfiddle и код, который вы можете скопировать вставить в одну статическую страницу html :

Вы можете сделать это с помощью этого кода. посетите здесь полный учебник с автоматическим определением края http://www.voidtricks.com/custom-right-click-context-menu /

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

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

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

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

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

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

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

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

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

Я использую нечто подобное следующему jsfiddle

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

Похожие вопросы:

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

Я могу войти в объект contextmenu и отключить его ( как добавить пользовательское контекстное меню на веб-страницу? ), но как я могу заменить исходную href из объекта ссылки, когда пользователь.

Я бы хотел добавить контекстное меню на весь Android WebView. У меня есть следующий код: registerForContextMenu(findViewById(R.id.webview)); . public void onCreateContextMenu (ContextMenu menu.

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

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

Я хочу реализовать пользовательское контекстное меню на сайте, над которым я работаю. Я использовал document.oncontextmenu, который работает со всеми, кроме Opera, основными браузерами,для которых я.

Я хотел бы подключить его: https://jsfiddle.net/b2L6qppd/2/ с этим: https://jsfiddle.net/jonataswalker/ooxs1w5d/ и добавить в контекстное меню опцию для добавления всплывающего окна. var popup = new.

Есть ли способ добавить пользовательские поля во встроенное контекстное меню браузера с помощью Javascript? Я знаю, что flash/actionscript может это сделать, как они это делают? Пример: щелкните.

Это то, что я хотел бы: Я хочу сохранить параметры меню по умолчанию Silverlight и создать свое собственное глобальное контекстное меню rightclick. Я добавил меню на главную страницу .xaml и сделал.

jQuery contextMenu (fork)

Register new contextMenu

To register a new contextMenu:

options (at registration)

No Default Value — specification is Mandatory

The selector matching the trigger objects.

No Default Value — specification is Mandatory

Items to be listed in contextMenu. See Items.

(selector | DOMElement) appendTo

Specifies the DOMElement the generated menu is to be appended to

Specifies the event to show the contextMenu

Possible values: «right», «left», «hover»

Specifies if the regular right click context menu trigger should be ignored. Only applies to «left» and «hover» triggers

Specifies the time in milliseconds to wait before showing the menu. Only applies to trigger: «hover»

Specifies if the menu must be hidden when the mouse pointer is moved out of the trigger and menu elements

Specifies the offset to add to the calculated zIndex of the trigger element. Set to to prevent zIndex manipulation

Specifies additional classNames to add to the menu element

animation properties take effect on showing and hiding the menu. duration specifies the duration of the animation in milliseconds. show and hide specify jQuery methods to show and hide elements.

The show and hide events are triggered before the menu is shown or hidden.

The event handlers are executed in the context of the triggering object. this will thus reference the jQuery handle of the trigger object.

A reference to the current options object is passed

The event handlers may return false to prevent the show or hide process.

Position the context menu.

The function is executed in the context of the trigger object.

The first argument ist the $menu jQuery object

The second and third arguments are x and y coordinates provided by the showing event

x and y may either be integers denoting the offset from the top left corner, undefined, or the string «maintain». If the string «maintain» is provided, the current position of the $menu must be used. If the coordinates are undefined, appropriate coordinates must be determined. An example of how this can be achieved is provided with determinePosition.

Determine the position of the menu in respect to the given trigger object.

Hint: jQuery UI’s position() may ease things up.

Specifies the default callback to be used in case an item does not expose its own callback.

The default callback behaves just like item.callback.

options.items

The items map contains the commands to list in the menu. Each command has a unique key identifying an item object. The value may either be an item (properties explained below), or a string (which will insert a separator, disregarding the string’s content).

Specified the human readable name of the command in the menu

This is a mandatory property

Specifies the callback to execute if clicked on

The Callback is executed in the context of the triggering object. The first argument is the key of the command. The second argument is the options object. The Callback may return false to prevent the menu from being hidden.

If no callback and no default callback is specified, the item will not have an action

Specifies additional classNames to add to the item element

Specifies the icon class to set for the item.

Icons must be defined in CSS with selectors like .context-menu-item.icon-edit , where edit is the icon class.

Specifies if the command is disabled (true) or enabled (false).

May be a callback returning a boolean. The Callback is executed in the context of the triggering object. The first argument is the key of the command. The second argument is the options object.

Specifies the type of the command.

null, undefined and the empty-string make the command a simple clickable item.

«text» makes the command an of type text. The name followed by the are encapsulated in a .

«textarea» makes the command a . The name followed by the are encapsulated in a .

«checkbox» makes the command an of type checkbox. The name preceeded by the are encapsulated in a . The checkbox-element is moved to the icon space

«radio» makes the command an of type radio. The name preceeded by the are encapsulated in a . The radio-element is moved to the icon space

«select» makes the command a . The name followed by the are encapsulated in a .

«html» makes an non-command element.

Events to register on elements

The value of the element.

The selected option of a element and the checked property for «checkbox» and «radio» types.

Expecting a boolean when used with types «checkbox» and «radio».

Expecting a string when used with type «select»

Specifies the group of the radio elements.

Only used with type «radio».

Specifies the s for the element.

Only used with type «select».

The height in pixel element. If not specified, the height is defined by CSS.

Only used with type «textarea».

Commands to show in a sub-menu.

Reference to the
command element

created by contextMenu on registration

Reference to the or of the command element.

created by contextMenu on registration

Reference to the of the command element

created by contextMenu on registration

Reference to the

    sub-menu element

created by contextMenu on registration

opt (options at runtime)

opt is a reference to the options object passed at contextMenu registration

The element triggering the menu

The menu element

Registered callbacks of all commands (including those of sub-menus)

Registered commands (including those of sub-menus)

Registered commands of input-type (including those of sub-menus)

Access a specific : opt.inputs[key].$input

flag denoting if the menu contains input elements

The namespace (including leading dot) all events for this contextMenu instance were registered under

Disable a contextMenu trigger

disable contextMenu to be shown on specified trigger elements

Enable a contextMenu trigger

enable contextMenu to be shown on specified trigger elements

Manually show a contextMenu

show the contextMenu of the first element of the selector (position determined by determinePosition):

Register HTML5 context s

Unregister contextMenu

To unregister / destroy a specific contextMenu:

selector expects the (string) selector that the contextMenu was registered to

Unregister all contextMenus

To unregister / destroy all contextMenus:

Helper: Import values for

To fill input commands with values from a map:

To fill input commands with values from data-attributes:

Helper: Export values from

To fetch values from input commands:

To save values from input commands to data-attributes:

Events

Trigger context menu to be shown for a trigger object.

Available on trigger object. The Event must be supplied with coordinates for the menu:

will invoke determinePosition to position the menu

Select / highlight the previous possible command

Available on context menu.

Select / highlight the next possible command

Available on context menu.

HTML5 import

considering the following HTML $.contextMenu.fromMenu($(‘#html5menu’)) will return a proper items object

$.contextMenu.fromMenu() will properly import (and thus handle) the following elements. Everything else is imported as

The must be hidden but not removed, as all command events (clicks) are passed-thru to the original command element!

$.ui.position

The position utility of jQuery UI makes relative positioning very simple. But the real beauty is collision detection, allowing the contextMenu to be shown to the left side of the pointer, if there’s not enough space to the right. Its use is optional, if you want to shape off some more bytes by sacrificing usability: go ahead…

Редактирование контекстного меню Windows

Как отредактировать контекстное меню Windows. Удалить или добавить пункты контекстного меню Windows XP, 7, 8.1, 10 в нашей статье. Редактор контекстного меню Easy Context Menu.

Редактировать контекстное меню (меню, что появляется при правом клике мыши по какому-либо файлу, папке или области на рабочем столе) будем с помощью программы Easy Context Menu.

Скачать программу можно по ссылкам в самом низу статьи.

Разархивируем утилиту. Запускаем файл EcMenu или EcMenu_x64 с учётом разрядности нашей Windows.

В настройках выставляем русский язык.

Алгоритм удаления пунктов контекстного меню (программ) достаточно прост.

  1. Непосредственно в интерфейсе программы нажимаем сочетание клавиш Ctrl+X или заходим в меню File → ContextMenu Cleaner.
  2. В открывшемся меню снимаем галочки с пунктов, которые соответствуют пунктам контекстного меню подлежащих удалению. Это просто.В результате получаем контекстное меню без ненужных нам пунктов (удалённые из меню пункты можно вернуть в любой момент установив галки на место).
  3. Картинки ниже показываю наглядно контекстное меню Windows «ДО» и «ПОСЛЕ» редактирования.

Контекстное меню Windows до редактирования

Контекстное меню Windows после редактирования

В данном случае нам понадобилась всего одна функция Context Menu Cleaner. С её помощью удалить ненужные пункты контекстного меню очень просто. Что не менее важно, вернуть их на место тоже не сложно.

Как добавить в контекстного меню программы (дополнительные пункты).

  1. В интерфейсе программы нажать Файл → Редактор списка команд или Ctrl+E.
  2. В открывшемся редакторе нажать Добавить команду.
  3. Выбрать нужный .EXE файл для добавления программы в контекстное меню.
  4. С помощью кнопок Вверх и Вниз переместить пункт в место назначения в дереве контекстных меню.
  5. Нажать Сохранить и закрыть Редактор списка команд.
  6. В основном меню программы убедиться, что нужный нам пункт помечен галочкой.
  7. Нажать кнопку Применить изменения (кнопка мыши с зелёным плюсом).

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

Использование Easy Context Menu для других задач.

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

Из них заслуживают внимания следующие:

  • Удалить временные файлы.
  • Перезапустить проводник Windows.
  • Заблокировать клавиатуру, мышь.
  • Копировать IP адрес в буфер.
  • Исправить диспетчер очереди печати.

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

Также возможно изменять расположение элемента в контекстном меню.

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

Пункт Удерживать Shift для показа позволяет скрывать элемент меню до тех пор, пока не будет зажата клавиша Shift. После зажатия Shift элемент снова станет видимым.

О программе Easy Context Menu.

Easy Context Menu — программа, позволяющая добавлять полезные команды и функции в контекстном меню Рабочего стола, Моего компьютера, папок, дисков и файлов , что предоставляет быстрый доступ к компонентам Windows.

Программа имеет простой и понятный интерфейс, поэтому разобраться с ней не составит труда. Утилита портативная и бесплатная.

Информация и системные требования.

Разработчик: Sordum’s software, Sordum.org

Лицензия: бесплатная (Free)

Операционная система Windows OS: 10 / 8.1 / 8 / 7 / Vista / XP — 32|64-bit;

Интерфейс: английский,русский,немецкий, итальянский и другие языки;

contextMenu.js

A multiple purpose and highly customizable jQuery Context Menu for your websites.

contextMenu.js

contextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.
Why contextMenu.js ?:

  • Use as simple popup or as a context menu. With some tweaking, it can be used for multiple purposes.
  • Adjust position and size to fit in viewport.
  • Keyboard interaction.
  • Support for different types of inputs (structure object, UL list) .
  • Trigger Context menu with right-click, left-click,hover or any other mouse events.
  • Support touch devices.
  • Css outside of javascript so you can edit the look of menu.
  • Enable/disable options.
  • Optional icons for commands.
  • Lot of configurable options.
  • Submenus

Examples

Simple context menu

Sub menus

Popup menu

Popup menu are used to display content around the cursor or trigger button.
This are much dependent on defined styles and interaction.

Enable/disable menu options

Overriding browser context menu

Context menu as validation tip box

Context menu as simple model box

Context menu as simple tool tip

Context menu as simple menu

  • Intro
  • Demo
  • Documentation

Test all options

Documentation

Options

Callback

Inside callback this refers to trigger element.

Method

Context menu parameters

1. method tells what operation to trigger . By default it is popup if selector is string type (selector notation) and menu if selector is structure object.
2. selector can be document object , jQuery object ,selector string or structure object.
3. option, there are different options to change the behaviour of context menu. This parameter is optional where all options contain some default value. .

Input format

If defined in menu mode you can provide input in two way.
1. By passing selector of ul list.
2. By passing a array of objects containg menu defination.

1. UL List format
**Note**
1. To disable any option add «iw-mDisable» class in the option.
2. Submenu are ul list inside a option li.
3. Option icon have class «iw-mIcon».

Structure object format Keys :
1. name : name of the option.
2. img :option icon image.
3. title : tiltes for the options.
4. className : Add class to the item. That class you can than use to give styles to particular item.
5. disable : A boolean to tell weather that option is disabled or not. If true option is disabled.
6. submenu : A submenu defination which has all options available as we are giving for parent menu. Submenus can bgo to any level. 7. fun :Function that will be executed on click of option.

fun Callback accept two argument.
1. data : Which containg refrence to trigger and menu.
You can get trigger and menu using data.trigger and data.menu.
2. event : A event object which is binded with trigger to open context menu.

Inside callback this refers to trigger element.

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector