
Апрель 9, 2016 Запись была обновлена
Контекстное меню для вашего сайта на HTML5

В этом уроке мы рассмотрим как создать контекстное меню прямо на сайте. Контекстное меню — это меню которое появляется при щелчке правой кнопкой мыши. Технология HTML5 шагнула далеко вперед, и кроме возможности создать прогресс бар, видеоплеер, можно создать еще и контекстное меню. В этой статье мы рассмотрим как создать возможность динамического редактирования контента и отправки выделенного текст по email, доступ к которым осуществляется через контекстное меню.
Пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться? — «Контекстное меню для вашего сайта»
HTML часть
HTML5 ввел два новых элемента <menu >и <menuitem> для создания контекстного меню. Чтобы меню было контекстным в атрибуте type необходимо написать context и задать уникальный идентификатор.:
1 2 3 4 | <menu type="context" id="context-menu-id"> <menuitem icon="img/edit.png" onclick="editContent();">Редактировать текст</menuitem> <menuitem icon="img/mail.png" onclick="sendEmail();">Email</menuitem> </menu> |
В атрибуте icon пропишем адреса к изображениям, которые находятся перед описанием пункта меню. А также в атрибуте onclick размещаются функции, которые опишем чуть ниже.
В меню можно добавить подпункты следующим образом:
1 2 3 4 5 6 7 8 | <menu type="context" id="context-menu-id"> <menuitem>Редактировать текст</menuitem> <menuitem>Email</menuitem> <menu label="Рассказать..."> <menuitem>Facebook</menuitem> <menuitem>Twitter</menuitem> </menu> </menu> |
Javascript часть
Основа меню у нас готова, функции в атрибуте onclick прописаны, можем приступать к описанию данных функций.
Первой напишем функцию отправления выделенного текста по email. Сначала нам необходимо получить выделенный текст, делаем это следующей функцией:
1 2 3 4 5 6 7 8 9 | 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; }; |
А затем отправляем с помощью функции:
1 2 3 4 | function sendEmail() { var bodyText = getSelectedText(); window.location.href = 'mailto:?subject='+ document.title +'&body='+ bodyText +''; }; |
А что касается функции динамического редактирования текста, то здесь мы просто устанавливаем значение атрибута contenteditable в true:
1 2 3 4 | function editContent() { $theContent.attr('contenteditable', 'true'); $saveButton.add($cancelButton).show(); }; |
Вывод
Действительно потрясающая возможность появилась в HTML5, к сожалению это работает только в браузере Firefox. Ведь с помощью данной функции можно сделать сайт еще более удобным для пользователя, путем размещения самых нужных функций в контекстном меню.
Успехов!
С Уважением, Юрий Немец
Источник: http://www.hongkiat.com/blog/html5-contextual-menu/
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Работает только на Firefox ?
К сожалению да, только в Firefox.
Да, жаль, в основном пользуюсь Хромом,
хотя дело не во мне конечно, а в посетителях сайта,
но и там преимущество за Хромом.
Но на некоторых сайтах, например в гугл доках, это работает независимо от браузера. Как там это может быть реализовано?