Атрибут contextmenu в HTML


Содержание

Frontender Magazine

Обновление: контекстные меню отображаются даже если отключен JavaScript; так что лучше всего создавать их разметку с его помощью. Либо с помощью innerHTML в сложных случаях, либо с помощью DOM API в простых.

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

Для начала напишем HTML и определим ID меню:

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

Теперь, когда у нас есть тег menu для которого задан атрибут type=»context» и id , значение которого соответствует значению атрибута contextmenu блока, для которого меню предназначено, контекстное меню будет создано.

У элементов меню могут быть атрибуты label , icon , и onclick , которые будут определять его представление и поведение. Атрибут onclick может вызывать предопределенные функции или содержать инлайн-код. Множество элементов могут использовать одно и тоже меню, так что дублировать их не понадобится.

Это то самое место, где мне бы стоило написать обо всем более детально, но это так просто, что я не хочу быть нудным… Посмотрите пример.

Единственный браузер, который поддерживает это API на данный момент Mozilla Firefox. Я бы не сказал, что контекстное меню — критически необходимая фича, но это мило и я планирую в ближайшее время добавить её в свой блог. Это API прекрасная демонстрация принципа «ненавязчиво делает жизнь лучше и совершенно не вредит». Мой пример с публикацией в социальных сетях крайне примитивен и вторичен; есть идеи как можно использовать API контекстного меню с большей пользой? Расскажите об этом в комментариях!

HTML Атрибут contextmenu

Атрибут contextmenu (от англ. «context menu» ‒ «контекстное меню») указывает контекстное меню элемента.

Синтаксис

Значения

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

Значение по умолчанию

Применяется к тегам

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

Примечание: Официальная разметка контекстного меню и разметка меню, используемая для Firefox, отличается некоторыми особенностями. Firefox для создания меню поддерживает элемент menuitem .

ContextMenu атрибут HTML

примеров

Поддержка браузеров

В настоящее время только Firefox браузеры поддерживают атрибут ContextMenu.

Определение и использование

ContextMenu атрибут определяет элементы контекстного меню. Когда правый элемент пользовательского появится контекстное меню. / P>

Контекстное значение атрибута идентификатор необходимо открыть элемент .

Различия между HTML 4.01 и HTML5

ContextMenu атрибут является новым в HTML5 атрибуты.

Атрибуты и аксессуары


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

Официально введен в спецификацию довольно давно предлагаемый Microsoft атрибут contentediteble. На самом деле достаточно симпатичная идея, поначалу встретила некоторые трудности в кроссбраузерной реализации, но теперь она поддержана всеми ведущими производителями. Суть очень проста — при установке этого атрибута содержимое элемента становится доступным для редактирования в браузере:

The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with

The user’s address book, and submit a defined format to the server . It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

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

Атрибуты HTML-тегов

С тем, что такое HTML теги, мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом

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

Как писать атрибуты?

Атрибуты — зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично — это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

Значения с атрибутами записываются в таком формате:

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

Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.

Универсальные атрибуты

Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.

  • accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

  • class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
  • С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.
  • При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
  • dir определяет направление текста: слева направо (ltr) или справа налево (rtl).
  • draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
  • dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy), перемещать (move) или создать на него ссылку (link).
  • h >

  • translate разрешает (yes) или запрещает (no) перевод содержимого тега.
  • align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому краю (right), по центру (center) или по ширине (justify). Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.

Пример использования атрибутов

В качестве примера рассмотрим строку HTML-кода:

Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.

Разберём каждый элемент строки.

— открывающий тег контейнера, хранящего абзац.

Между символами > и

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

Контекстное меню в браузере средствами HTML5

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

Для чего может быть предназначен атрибут contextmenu ? Он позволяет добавлять различные опции в контекстное меню браузера, которое выводится по нажатию правой кнопки мыши, с помощью всего лишь нескольких строк кода HTML даже тогда, когда Javascript отключен. Хотя на текущий момент такой удобный инструмент доступен только в Firefox.

Вот как он работает:

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

Затем создаем меню:

Атрибут id должен соответствовать атрибуту contextmenu . Таким образом, возможно использовать разные контекстные меню для разных частей страницы.

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

Также можно создавать подменю:

Очень интересное и полезное свойство HTML5. Но, его применение ограничивается только браузером Firefox.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: speckyboy.com/2013/02/13/quick-tip-the-html5-context-menu-attribute-2/
Перевел: Сергей Фастунов
Урок создан: 14 Февраля 2013
Просмотров: 35066
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок


Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

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

HTML5 contextmenu attribute

I’m following a tutorial to create a HTML5 contextmenu, and have so far got the following lines of code in my website:

This works perfectly fine when viewing the website in Mozilla Firefox, which is currently the only browser that supports it:

However, there is a polyfill available that will add additional support in other web browsers:

How do I apply this polyfill to my current code above, once I’ve included the JavaScript file in to the tag of my website?

Please keep in mind I’m not very familiar with JavaScript.

1 Answer 1

The menu and menuitem elements were featured in the initial HTML5 Candidate Recommendation but have since been removed. Firefox should not be handling these elements any more and other browsers are correct to ignore them.

In fact, the entire context menus section which was present in the 20121217 draft has been removed. Within that particular draft they’re marked alongside other removed elements such as hgroup and command as:

The following features are at risk and may be removed due to lack of implementation.

So in short: you shouldn’t use this at all as it’s no longer featured in the specification. You should instead find alternative methods to achieve what you are trying to do.

Собственное контекстное меню с использованием JavaScript

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

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

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

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

Список задач

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

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

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


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

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

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

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

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

Основа нашего меню такая же, как и у любого другого меню — неупорядоченный список, вложенный в тег nav. Каждое действие будет представлено в виде элемента списка со ссылкой. Каждая ссылка отвечает за определенное действие. Как я упоминал ранее, нам нужно три действия в контекстном меню:

  1. Просмотр задачи.
  2. Редактирование задачи.
  3. Удаление задачи.

Накидаем разметку:

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

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

А теперь стили.

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

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

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

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

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

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

В общем, делаем что-то такое:

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

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

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

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

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

Теперь мы не перебираем элементы списка. Вместо этого будем обрабатывать событие contextmenu по всему документу, проверяя, относится ли оно к одной из задач. Поэтому введена переменная taskItemClassName. Делать это мы будем, используя вспомогательную функцию clickInsideElement, принимающую два параметра:

  1. Само проверяемое событие.
  2. Имя класса для сравнения. Если событие произошло внутри элемента, имеющего указанный класс, или родитель этого элемента имеет такой класс, то нужно вернуть этот элемент.

Вот и первая вспомогательная функция:

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

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

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

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

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

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


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

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

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

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

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

Покликайте теперь везде. Меню появляется везде! Это потрясающе, но есть пара моментов, которые надо бы решить:

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

Давайте решать первую проблему. Воспользуемся JS, чтобы определить ширину и высоту нашего меню, и проверим, что меню полностью влезает. В противном случае немного сместим его. Это потребует небольшого количества математики и размышлений, но мы сделаем это просто и по шагам. Для начала проверим ширину и высоту окна. Затем найдем ширину и высоту меню. А после убедимся, что разница между координатами клика и шириной окна с отступом больше, чем ширина меню. И то же самое сделаем для высоты. Если меню не умещается на экране, скорректируем его координаты. Начнем с добавления двух переменных:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я выделил эту проблему в отдельный пункт, потому что это действительно важно после всего, что мы проделали. Задайтесь вопросом: действительно ли вам нужно собственное контекстное меню? Такие штуки — это круто, но прежде чем их использовать, вы должны убедиться, что это действительно полезно в вашем случае. Обычно пользователи ожидают привычного поведения приложения. Например, после правого клика по фотографии они ожидают получения возможности сохранить ее, скопировать ссылку и т. д. Отсутствие нужных пунктов в кастомном меню может их огорчить.

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

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

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


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

От переводчика

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

Атрибут HTML5 contextmenu

Я следую учебному пособию по созданию контекстного меню HTML5 и до сих пор получил следующие строки кода на моем веб-сайте:

Это прекрасно работает при просмотре веб-сайта в Mozilla Firefox, который на данный момент является единственным браузером, который поддерживает его:

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

Как применить это заполнение к моему текущему коду, приведенному выше, после того, как я включил файл JavaScript в моего сайта?

Пожалуйста, имейте в виду, что я не очень знаком с JavaScript.

1 ответ

Элементы menu и menuitem были включены в первоначальную Рекомендацию кандидата HTML5, но с тех пор были удалены . Firefox больше не должен обрабатывать эти элементы, и другие браузеры могут игнорировать их.

Фактически весь раздел контекстных меню, который присутствовал в проекте 20121217 , был удален. В этом конкретном проекте они отмечены рядом с другими удаленными элементами, такими как hgroup и command как:

Следующие функции находятся в опасности и могут быть удалены из-за отсутствия реализации.

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

Атрибуты HTML-тегов

С тем, что такое HTML теги, мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом

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

Как писать атрибуты?

Атрибуты — зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично — это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

Значения с атрибутами записываются в таком формате:

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

Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.

Универсальные атрибуты

Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.

  • accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

  • class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
  • С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.
  • При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
  • dir определяет направление текста: слева направо (ltr) или справа налево (rtl).
  • draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
  • dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy), перемещать (move) или создать на него ссылку (link).
  • h >
  • translate разрешает (yes) или запрещает (no) перевод содержимого тега.
  • align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому краю (right), по центру (center) или по ширине (justify). Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.

Пример использования атрибутов

В качестве примера рассмотрим строку HTML-кода:

Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.

Разберём каждый элемент строки.

— открывающий тег контейнера, хранящего абзац.

Между символами > и

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.
Илон Маск рекомендует:  CSS центрирование DIV блоков горизонтальное и вертикальное
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL