Показать сообщение отдельно
  #3 (permalink)  
Старый 30.03.2015, 22:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Rabbit13245, второй картинке добавлен класс
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .context-menu{
     position: absolute;
     background: #D2B48C;
      border-radius: 8px
   }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       // Вешаем слушатель события нажатие кнопок мыши для всего документа:

    jQuery(document).on('contextmenu click' , '.images',function(event) {    event.preventDefault() ;
    // Убираем css класс selected-html-element у абсолютно всех элементов на странице с помощью селектора "*":
    jQuery('*').removeClass('selected-html-element');
    // Удаляем предыдущие вызванное контекстное меню:
    jQuery('.context-menu').remove();
    // Проверяем нажата ли именно правая кнопка мыши:
    if (event.which === 3)  {
    // Получаем элемент на котором был совершен клик:
    var target = $(this);
    // Добавляем класс selected-html-element что бы наглядно показать на чем именно мы кликнули (исключительно для тестирования):
    target.addClass('selected-html-element');
    // Создаем меню:
    jQuery('<div/>', {
    'class': 'context-menu'
    // Присваиваем блоку наш css класс контекстного меню:
    })
    .css({
    left: event.pageX+'px',
    // Задаем позицию меню на X
    top: event.pageY+'px'
    // Задаем позицию меню по Y
    })
    .appendTo('body') // Присоединяем наше меню к body документа:
    .append( // Добавляем пункты меню:
    jQuery('<ul/>').append('<li><a href="#">Remove element</a></li>')
    .append('<li><a href="#">Add element</a></li>')
    .append('<li><a href="#">Element style</a></li>')
    .append('<li><a href="#">Element props</a></li>')
    .append('<li><a href="#">Open Inspector</a></li>')
    )
    .show('fast'); // Показываем меню с небольшим стандартным эффектом jQuery. Как раз очень хорошо подходит для меню

      }

  });

});


  </script>
</head>

<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="images" alt="">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">

</body>

</html>
Ответить с цитированием