—»     —»   Добавляем контекстное меню на веб-сайт при помощи HTML5
  Раздел: Меню и Навигация   Нет комментариев  

Добавляем контекстное меню на веб-сайт при помощи HTML5

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

Многие годы термин «контекстное меню» относится в первую очередь к нативным приложениям. Однако теперь у нас есть возможность извлечь из него преимущества и в веб-приложениях. В качестве примера можно привести менеджер файлов в Gmil. Это меню реализовано при помощи кода javascript:

Добавляем контекстное меню на веб-сайт при помощи HTML5

В будущем у нас будет возможность создавать контекстные меню для сайтов, основанных на 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

Добавляем иконку

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

Добавляем контекстное меню на веб-сайт при помощи HTML5

Мы также можем добавить иконку в наше контекстное меню на 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>

Вот что мы увидим в окне браузера.

Добавляем контекстное меню на веб-сайт при помощи HTML5

Заставляем меню работать

На данном этапе наше новое контекстное меню не будет работать при нажатии. Однако мы можем очень просто привести его в чувства посредством небольшого кода 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).

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 8684   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031