Створення контекстних меню на HTML5

20

Від автора: Контекстні меню – це не настільки відома можливість специфікації HTML5. Вони дозволяють вам додавати власні пункти в меню, яке з’являється, коли користувач натискає кнопку миші, знаходячись на сторінці. Використовуючи JavaScript, ви можете керувати діями, які відбудуться, якщо один з цих пунктів меню буде обраний.

В цьому пості, ви дізнаєтеся, як створювати власні контекстні меню, використовуючи елементи menu і menuitem.

Створення контекстних меню на HTML5

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

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

Створення контекстних меню на HTML5Створення контекстних меню на HTML5

Підтримка браузерів для 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.

Вкладені меню

Створення контекстних меню на HTML5

Вкладені контекстні меню

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

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

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

Створення контекстних меню на HTML5

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

Зібравши все разом, ось демо прикладу контекстного меню, яке надає можливість поділитися поточну сторінку. Тут ми збираємося використовувати простий JavaScript код, який направить користувача по відповідному посиланню, коли він клікає по пункту меню.

У цьому випадку, ми використовуємо стандартний елемент div, в якості об’єкта для події кліка.

Right-click here to see the menu.

Висновок

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

Що ви думаєте про контекстних меню на HTML5? Ви б хотіли, щоб інші браузери поквапилися реалізувати цю можливість або ви стурбовані тим, що вона може експлуатуватися? Повідомте нам в коментарях.