Лого SiteHere.ru

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

Контекстное меню для вашего сайта на 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/

4 комментария к записи
  • Артём

    Работает только на Firefox ?

     
    • Юрий

      К сожалению да, только в Firefox.

       
      • Артём

        Да, жаль, в основном пользуюсь Хромом,
        хотя дело не во мне конечно, а в посетителях сайта,
        но и там преимущество за Хромом.

         
  • вова

    Но на некоторых сайтах, например в гугл доках, это работает независимо от браузера. Как там это может быть реализовано? 

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *