menuitem в HTML


Содержание

HTML tag

Описание

В HTML тег используется для определения пункт меню для меню.

Это позволит получить следующее в браузер Firefox только:

Right-click inside here.

Общие атрибуты

Этот тег поддерживает все глобальные атрибуты описано в — HTML-атрибут ссылки

Специальные атрибуты

В HTML tag также поддерживает следующие дополнительные атрибуты:

Атрибут Значение Описание
Проверить Проверить Определяет, что menuitem должны быть проверены
Команда
По умолчанию По умолчанию menuitem помечен, как по умолчанию, команда
Отключено Отключено Отключает menuitem и не может быть нажата
Значок URL-адрес Определяет значок для пункта меню
Метка Текст Определяет название пункта меню отображается для пользователя
Radiogroup Имягруппы Defiens a группа команд, из которых можно выбрать только одну
Тип Определяет тип команды для пункта меню по умолчанию — команды

атрибутов события

Этот тег поддерживает всех атрибутов события описаны в — HTML события ссылки

HTML Tag

This tag has now been removed from the HTML5 specification. Rather than remove this article altogether, I have decided to keep it here for reference.

The HTML tag represents a command that the user can invoke from a popup menu (either a context menu or the menu of a menu button).

You can use one or more type , label , icon , disabled , checked , and radiogroup attributes to set a new command. Otherwise you can use the command attribute to reference another command. This way, you can define a command once, set its state (e.g. whether it is active or disabled) in one place, and have all references to that command in the user interface change at the same time.

Syntax

The tag is written as (no end tag) with its contents inserted between the start and end tags. The tag can have any number of attributes, which are inserted into the start tag.

The tag must be a child of a element whose type attribute is in the popup menu state.

Example

Context Menu

Here’s an example of using the tag to create a context menu. Right-clicking on the photo will invoke the browser’s contextual menu. However, a new option will be added to the browser’s contextual menu: «Change Border Color. «. The user can then select from the list of colors.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the tag/element.

Attribute Description
type Specifies the type of command.
  • command (default value). This value means that element represents a normal command with an associated action.
  • checkbox The element represents a state or option that can be toggled.
  • radio Means that the element represents a selection of one item from a list of items.
label Specifies the name of the command, as shown to the user.
icon Specifies the URI (or IRI) of graphical image that represents the action.
disabled Specifies if the command is disabled or not.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either disabled or disabled=»disabled» ).

  • [Empty string]
  • disabled
checked Indicates whether the command is selected or not. This attribute can only be used when the type attribute is either checkbox or radio .

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either checked or checked=»checked» ).

  • [Empty string]
  • checked
radiogroup Specifies the name of the group of commands that will be toggled when the command itself is toggled, for commands whose type attribute has the value «radio».


default Specifies that the command is the one that would have been invoked if the user had directly activated the menu’s subject instead of using the menu.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either default or default=»default» ).

  • [Empty string]
  • default
command Here’s what the W3C HTML5 specification says about the command attribute:

If the element’s Disabled State is false (enabled) then the element’s activation behavior depends on the element’s type and command attributes, as follows:

If the element has a master command set by its command attribute
The user agent must run synthetic click activation steps on the element’s master command.

If the type attribute is in the Checkbox state
If the element has a checked attribute, the UA must remove that attribute. Otherwise, the UA must add a checked attribute, with the literal value checked.

If the type attribute is in the Radio state
If the element has a parent, then the UA must walk the list of child nodes of that parent element, and for each node that is a menuitem element, if that element has a radiogroup attribute whose value exactly matches the current element’s (treating missing radiogroup attributes as if they were the empty string), and has a checked attribute, must remove that attribute.

Then, the element’s checked attribute must be set to the literal value checked .

Otherwise
The element’s activation behavior is to do nothing.

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The tag is not supported in HTML 4.

The tag is not actually supported in the first version of HTML5 either. It is supported in HTML 5.1 and the WHATWG HTML Living Standard.

For more information on this element, see HTML5 Tag. Also check out the links to the official specifications below.

Template

Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

For more information on attributes for this tag, see HTML5 Tag.

* The title attribute has special semantics on the element. If used, indicates the kind of command: either a normal command with an associated action, or a state or option that can be toggled, or a selection of one item from a list of items.

Tag Details

For more details about the tag, see HTML5 Tag.

Specifications

Here are the official specifications for the element.

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

HTML menuitem Tag


Contents

HTML menuitem: Main Tips

  • HTML tag was used to declare a command which the user could request from a popup menu.
  • To set up a new command, you could utilize one or multiple of tag-specific attributes.
  • You could also use the command attribute to connect to other commands.
  • HTML menuitem tag has been deprecated since HTML 5.2.

What Meant

Now unsupported HTML menuitem element defined a command to invoke from the popup menu by the user:

In the example above, you can also see a tag which created a HTML menuitem separator. It was a thin line separating the possible commands. When creating a website, HTML menuitem separator could be used to group similar options to simplify the user experience.

HTML .am>

The HTML tag is used for specifying a command that the user can invoke from a popup menu.

You can use one or more type , label , icon , disabled , checked , and radiogroup attributes to set a new command. Otherwise you can use the command attribute to reference another command.

The tag was introduced in HTML 5.

Example

When the user right click’s on the image, a context menu appears with various options specific to this image. In this case we’ve added an option to change the color of the border. We have also added links to further information about the photo topic.

Note that at the time of writing, this feature was only supported in Firefox.

Also note that, although the element is an empty element and should not have a closing tag, this example currently only works by using a closing tag.

Right click on the image to invoke the context menu. Note: Only supported in Firefox at time of writing.

Source Code Result

Attributes

The tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.

Attributes Specific to the Element

Attribute Description
type Specifies the type of command.
  • command (default value). This value means that element represents a normal command with an associated action.
  • checkbox The element represents a state or option that can be toggled.
  • radio Means that the element represents a selection of one item from a list of items.
label Specifies the name of the command, as shown to the user.
icon Specifies the URI (or IRI) of graphical image that represents the action.
disabled Specifies if the command is disabled or not.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either disabled or disabled=»disabled» ).

  • [Empty string]
  • disabled
checked Indicates whether the command is selected or not. This attribute can only be used when the type attribute is either checkbox or radio .

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either checked or checked=»checked» ).

  • [Empty string]
  • checked
radiogroup Specifies the name of the group of commands that will be toggled when the command itself is toggled, for commands whose type attribute has the value «radio».
default Specifies that the command is the one that would have been invoked if the user had directly activated the menu’s subject instead of using the menu.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either default or default=»default» ).

  • [Empty string]
  • default
command Here’s what the W3C HTML5 specification says about the command attribute:


If the element’s Disabled State is false (enabled) then the element’s activation behavior depends on the element’s type and command attributes, as follows:

If the element has a master command set by its command attribute
The user agent must run synthetic click activation steps on the element’s master command.

If the type attribute is in the Checkbox state
If the element has a checked attribute, the UA must remove that attribute. Otherwise, the UA must add a checked attribute, with the literal value checked.

If the type attribute is in the Radio state
If the element has a parent, then the UA must walk the list of child nodes of that parent element, and for each node that is a menuitem element, if that element has a radiogroup attribute whose value exactly matches the current element’s (treating missing radiogroup attributes as if they were the empty string), and has a checked attribute, must remove that attribute.

Then, the element’s checked attribute must be set to the literal value checked .

Otherwise
The element’s activation behavior is to do nothing.

Global Attributes

The tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.

Attribute Description
accesskey Specifies a shortcut key that can be used to access this element.

[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]

class This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use.
contenteditable This attribute specifies whether the user can edit the content or not.
  • true
  • false
contextmenu The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM.
dir Specifies the direction of the text.
Value Description
ltr Specifies that the text should read left to right.
rtl The text should read right to left.
auto The text direction should be determined programatically using the contents of the element.
draggable Specifies whether the user is allowed to drag this element or not.
  • true
  • false
  • auto
Value Description
true This value specifies that the element is draggable.
false A false value specifies that the element is not draggable.
auto Uses the default behavior of the user agent/browser. This is the default value.
dropzone The dropzone attribute specifies what should happen when the user «drops» an element (i.e. after dragging it) onto this element.

Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.

Value Description
copy Results in a copy of the dragged data. Default value.
move Results in the data being moved to the new location.
link Results in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string » string: « Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string » file: « Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone=»copy file:image/png file:image/gif file:image/jpeg»

Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.

hidden Indicates that this particular element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either hidden or h ).

  • [Empty string]
  • hidden
id The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
itemid The itemid provides a global identifier for an «item». This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.

The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary’s specification.

itemprop This attribute provides one or more properties to one or more «items».

Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute’s value must have at least one token. Each token must be one of the following:

  • A valid URL that is an absolute URL, or
  • If the item is a typed item: a «defined property name» allowed in this situation according to the specification that defines the relevant types for the item, or
  • If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:).

Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.

itemref This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the «item». Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.
itemscope HTML5 elements that have the itemscope attribute create a name-value pair called an «item». Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope=»itemscope» ).

  • [Empty string]
  • itemscope
itemtype This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute’s value must have at least one token.

The itemtype attribute must only be present in elements that include the itemscope attribute.

lang Sets the language code to be used.

[Must be a valid RFC 3066 language code, or an empty string.]


spellcheck Specifies whether the element should have its spelling checked.
Value Description
[Empty string] The element should have its spelling checked.
true The element should have its spelling checked.
false The element should not have its spelling checked.

If this attribute is missing, the element will use the default behavior, possibly based on the parent’s own spellcheck state.

style Specifies inline styles for this element. This allows you to define the styles within the page, and within this tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
tabindex Helps determine the tabbing order for this element (for when the user uses the «tab» key on their keyboard to «tab» through the elements on the page in order to select an element).

[Any valid integer. For example, 0, 1, 2, 3, . etc]

title Specifies a title to associate with this particular element. Many browsers will display this when the cursor hovers over the element (similar to a «tool tip»).

[Any text to be displayed as a «tool tip».]

translate Determines whether the element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The translate attribute is an enumerated attribute and may contain the following possible values:

If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.

Event Handler Content Attributes

The tag also accepts the event handler content attributes listed below.

An event handler content attribute is an attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler.

Event handlers are commonly used to extend the functionality of an HTML element. By using any of the event handler content attributes below, you can tell the browser to run a specific script and when to run it. For example, by using onclick=»» , you tell the browser to run a piece of JavaScript whenever someone clicks on the element. The JavaScript needs to be inserted between the double quotes. This is typically a small piece of JavaScript that simply calls a JavaScript function that has been defined elsewhere.

Here are the event handler content attributes that can be used with the element.

Attribute Description
onabort Invoked when an event has been aborted. For example, the browser stops fetching media data before it is completely downloaded.
onblur User has left the focus of the element.
oncancel cancel event handler.
oncanplay Invoked when the browser/user agent can start playing media, but hasn’t yet, due to buffering. In other words, if playback were to begin now, it wouldn’t play right to the end (due to the current playback rate) — it would need to pause during playback in order to load the rest of the media.
oncanplaythrough The browser/user agent estimates that if playback were to begin now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
onchange User has changed the object, then attempts to leave that field (i.e. clicks elsewhere).
onclick Invoked when the user clicked on the object.
onclose close event handler.
oncontextmenu Invoked when a context menu has been triggered.
oncuechange cuechange event handler.
ondblclick Invoked when the user clicked twice on the object.
ondrag Invoked when an element is being dragged.
ondragend Invoked when an element has stopped being dragged.
ondragenter Invoked when an element has been dragged to a drop target.
ondragexit dragexit event handler.
ondragleave Invoked when an element leaves a valid drop target.
ondragover Invoked when an element is being dragged over a valid drop target.
ondragstart Invoked when a drag operation has started.
ondrop Invoked when an element is being dropped.
ondurationchange Invoked when the length of the media is changed (i.e. the duration attribute has just been updated).
onemptied Invoked when a media resource element suddenly becomes empty (for example, due to a network error).
onended Invoked when the media has reached the end.
onerror Invoked when an error occurs while the element is being loaded. Also handler for script error notifications.
onfocus Invoked when the focus is on the element.
oninput input event handler.
oninvalid invalid event handler.
onkeydown Invoked when a key was pressed over an element.
onkeypress Invoked when a key was pressed over an element then released.
onkeyup Invoked when a key was released over an element.
onload The element has loaded.
onloadeddata Invoked when the browser/user agent can render the media data at the current playback position for the first time.
onloadedmetadata Invoked when the browser/user agent has just determined the duration and dimensions of the media resource.
onloadstart Invoked when the browser/user agent has started loading the media resource.
onmousedown The cursor moved over the object and mouse/pointing device was pressed down.
onmousemove The cursor moved while hovering over an object.
onmouseout The cursor moved off the object
onmouseover The cursor moved over the object (i.e. user hovers the mouse over the object).
onmouseup The mouse/pointing device was released after being pressed down.
onmousewheel Invoked when the mouse wheel is being rotated.
onpause Invoked when the media resource has been paused.
onplay Invoked when the media resource starts playback.
onplaying Playback has begun.
onprogress The browser/user agent is fetching media data the.
onratechange Invoked when the playback rate has changed (i.e. either the defaultPlaybackRate or the playbackRate has just been updated).
onreset reset event handler.
onresize resize event handler.
onscroll scroll event handler. Invoked when the element’s scrollbar is being scrolled.
onseeked Invoked when the seeking IDL attribute changed to false (i.e. the seeking attribute is no longer true)
onseeking Invoked when the seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.
onselect Invoked when some or all of the contents of an object is selected. For example, the user selected some text within a text field.
onshow show event handler.
onstalled Invoked when the browser/user agent is trying to fetch media data but the data has stalled (i.e. the data has stopped coming).
onsubmit User submitted a form.
onsuspend The browser/user agent is (intentionally) not currently fetching media data, but has not yet downloaded the entire media resource (i.e. it has suspended the download).
ontimeupdate Invoked when the media’s current playback position changed.
onvolumechange Invoked when either the volume attribute or the muted attribute has changed.
onwaiting The next frame of the media is not yet available (but the browser/user agent expects it to become available).

More Information About the Element

Content Categories
Can be used As a child of a element whose type attribute is in the popup menu state.
Content model Empty.
End Tag Required? No. You can only use a start tag when using the element, it must not have a closing tag.
  • Right:
  • Wrong:

Note that as of this writing, the only works properly (in Firefox) if a closing tag is included.

DOM Interface HTMLMenuItemElement

Specifications for the Tag

Here is the element defined in the various specifications:

  • W3C (HTML5). Note that this link goes to a draft specification page for HTML 5.1. This is because, at the time of writing, the element is not in the HTML5 specification — it’s only in the HTML 5.1 draft specification.
  • WHATWG (HTML Living Standard)

HTML Tag

Sharing is caring!

Creating Menu Options

The element defines an item in a menu. It’s designed to help you build pop-up menus using HTML, and is a new element in the HTML 5 specification.

Implementation in Modern Browsers

The majority of browsers don’t support in any form. Only Firefox will render it correctly, and it can only be used where the type attribute of is set to context . As such, it’s marked Not Implemented since no browser fully supports it.

Контекстные меню на языке HTML5 пришли, и выглядят они сносно

Пару раз на Хабрахабре я упоминал ужé что Firefox 8 станет поддерживать контекстные меню, написанные на языке HTML5. Именно поэтому, едва мой Firefox обновился до версии 8 beta, я пошёл пощупать, как эти меню будут выглядеть. Мне достаточно было из статьи «Firefox 8 for developers» по гиперссылкам допрыгать до соответствующей демонстрационной страницы да жмякнуть правой кнопкою мыши — и вот что предстало моим глазам:

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

Вот полный листинг кода демонстрационной страницы:

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

Уверен, что со временем авторы плагинов к ведущим джаваскриптовым библиотекам (прежде всего, видимо, jQuery) сочинят и приспособят «костыль», обеспечивающий тем браузерам, которые ещё не понимают этот подраздел стандарта HTML5, альтернативный вариант — джаваскриптовое преобразование контекстного меню на языке HTML5 в те виды наджаваскриптованных контекстных меню, которые употреблялись в последние годы перед этой нынешней новинкою.


Создание контекстных меню на 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 имеет некоторое количество атрибутов, которые отвечают за то, как он будет отображен в браузере.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

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

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

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

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

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

Заключение

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

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

Автор: Matt West

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

объекты HTML DOM MenuItem


объекты MenuItem

Объект MenuItem представляет элемент HTML .

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

Объекты доступа MenuItem

Вы можете использовать getElementById () для доступа к элементу :

Создание объектов MENUITEM

Вы можете использовать метод document.createElement (), чтобы создать элемент :

Свойства объекта MenuItem

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

Стандартные свойства и события

MenuItem объектов также поддерживает стандартные атрибуты и события

Контекстное меню для вашего сайта на HTML5

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

Пример можно увидеть здесь:

Посмотреть примерСкачать

Как пользоваться? — «Контекстное меню для вашего сайта»

HTML часть

HTML5 ввел два новых элемента и для создания контекстного меню. Чтобы меню было контекстным в атрибуте type необходимо написать context и задать уникальный идентификатор.:

В атрибуте icon пропишем адреса к изображениям, которые находятся перед описанием пункта меню. А также в атрибуте onclick размещаются функции, которые опишем чуть ниже.

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

Javascript часть

Основа меню у нас готова, функции в атрибуте onclick прописаны, можем приступать к описанию данных функций.

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

А затем отправляем с помощью функции:

А что касается функции динамического редактирования текста, то здесь мы просто устанавливаем значение атрибута contenteditable в true:

Вывод

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

в HTML

The tag is new in HTML5.

Specifying the command or menuitem that user can invoke from a popup menu.

tag is used to specify the command or menuitem that user can invoke from a popup menu.

The tag can be specified like .

A tag can contain more than one elements.

Syntax:
Required Attributes:
Attribute Description Values
Label Specifies the name of the menu item Text
Optional Attributes:
Attribute Description Values
checked Specifies the menu item should be checked when page loads Checked
Command Specifies the menu item action behavior
Default Specifies the menu item as being a default Default
Disabled Specifies the menu item should be disabled Disabled
Icon Specifies the icon of the menu item URL
Radiogroup Specifies the name of the group of commands.

Specially for radio

Group name
Type Specifies the type of menu item Checkbox
Command(default)
radio
Example:
Output:

Right click on the image to invoke the context menu.

Only supported in Firefox at time of writing.

Илон Маск рекомендует:  Что такое код ocinewcursor
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL