Многие годы термин «контекстное меню» относится в первую очередь к нативным приложениям. Однако теперь у нас есть возможность извлечь из него преимущества и в веб-приложениях. В качестве примера можно привести менеджер файлов в Gmil. Это меню реализовано при помощи кода javascript:
В будущем у нас будет возможность создавать контекстные меню для сайтов, основанных на HTML5. Предлагаем вам познакомиться с этим подходом.
Разработка контекстного меню
HTML5 представил нам 2 новых элемента: menu и menuitem, и они позволяют вам создавать контекстные меню. Для того чтобы браузер расценивал элемент menu как «контекстное меню», нам нужно установить тип меню как context, а также задать ему уникальный ID.
Ниже представлен пример, в котором мы создаем контекстное меню с этими свойствами.
<menu type="context" id="context-menu-id">
<menuitem>Edit Content</menuitem>
<menuitem>Email Selection</menuitem>
</menu>
У нас также остается возможность добавлять подменю, разветвляя элемент menu следующим образом:
<menu type="context" id="context-menu-id">
<menuitem>Edit Content</menuitem>
<menuitem>Email Selection</menuitem>
<menu label="Share...">
<menuitem>Facebook</menuitem>
<menuitem>Twitter</menuitem>
</menu>
</menu>
Теперь, для того, чтобы контекстное меню появилось на экране при клике правой кнопкой мыши, мы используем новый HTML-атрибут под названием contextmenu. Этот атрибут используется для того, чтобы определять меню с указанным ID. Учитывая наш вышеприведенный пример, мы можем определить наше контекстное меню при помощи contextmenu=context-menu-id.
Мы можем задать атрибут в тэге body, если хотим использовать контекстное меню на всей странице. Мы также можем добавить его в HTML-элемент, чтобы данное меню использовалось исключительно внутри данного элемента.
Теперь новое контекстное меню появится внутри меню Operating System, как видно на примере ниже.
Добавляем иконку
Уверены, что многие из вас видели контекстные меню, в которых используются иконки. В некоторых случаях иконка может стать отличным визуально вспомогательным элементом, который помогает пользователям найти меню. Вдобавок он также дает пользователям возможность понять, для чего предназначено данное меню.
Мы также можем добавить иконку в наше контекстное меню на HTML5 при помощи атрибута icon:
<menu type="context" id="context-menu-id">
<menuitem icon="img/edit.png">Edit Content</menuitem>
<menuitem icon="img/mail.png">Email Selection</menuitem>
<menu label="Share...">
<menuitem>Facebook</menuitem>
<menuitem>Twitter</menuitem>
</menu>
</menu>
Вот что мы увидим в окне браузера.
Заставляем меню работать
На данном этапе наше новое контекстное меню не будет работать при нажатии. Однако мы можем очень просто привести его в чувства посредством небольшого кода javascript. В нашем примере меню называется Email Selection. Это меню позволяет пользователям отправлять выделенный текст по электронной почте.
Чтобы оно заработало, давайте добавим функцию, которая позволит пользователям использовать выделенный код.
function getSelectedText() {
var text = "";
if(window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != 'Control') {
text = document.selection.createRange().text;
}
return text;
};
Затем мы создаем еще одну функцию, предположим sendEmail(), которая открывает email-клиент. Темой письма будет введенный текст из заголовка документа, а тело письма будет заполнено выделенным текстом.
function sendEmail() {
var bodyText = getSelectedText();
window.location.href = 'mailto:?subject='+ document.title +'&body='+ bodyText +'';
};
Наконец, мы добавляем эту функцию в наше меню посредством атрибута onclick.
<menuitem icon="img/mail.png" onclick="sendEmail();">Email Selection</menuitem>
Ранее мы уже рассказывали вам о том, как использовать HTML5 EditableContent, который позволяет нам редактировать веб-контент прямо на странице. Мы можем использовать данную функцию, добавив ее в наше меню под названием “Edit Content”.
В завершение
Лично мы очень обрадовались этой новой функции. Мы видим в ней множество возможностей. К сожалению, на момент написания данного материала, только Firefox поддерживал это свойство. Надеемся, что и другие браузеры скоро к нему подключатся.
Ниже можно просмотреть демо (работает только в Firefox).
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.