Outro plugin para menu de contexto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>ContextMenu plugin</title>
  <link rel="stylesheet" type="text/css" href="page_style.css" />
  <script type="text/javascript" src="http://www.shiguenori.com/jquery/jquery-1.3.1.js"></script>
  <script type="text/javascript" src="jquery.contextmenu.r2.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
 
      $('span.demo1').contextMenu('myMenu1', {
        bindings: {
          'open': function(t) {
            alert('Trigger was '+t.id+'\nAction was Open');
          },
          'email': function(t) {
            alert('Trigger was '+t.id+'\nAction was Email');
          },
          'save': function(t) {
            alert('Trigger was '+t.id+'\nAction was Save');
          },
          'delete': function(t) {
            alert('Trigger was '+t.id+'\nAction was Delete');
          }
        }
      });
 
    });
  </script>
<style type="text/css">
<!--
html,body{ background-color:#FFFFFF; border:none; }
-->
</style>
</head>
 
<body>
 
  <!-- DIV COM O MENU DE CONOTEXTO -->
  <div class="contextMenu" id="myMenu1">
    <ul>
      <li id="open"><img src="folder.png" /> Abrir</li>
      <li id="email"><img src="email.png" /> Email</li>
      <li id="save"><img src="disk.png" /> Salvar</li>
      <li id="delete"><img src="cross.png" /> Apagar</li>
    </ul>
  </div>
 
  <!-- ALVO PARA ACIONAR O MENU DE CONTEXTO -->
  <span class="demo1" style="border: 1px solid #888;">
    <b>Exemplo</b> clique com o botão direito
  </span>
 
</body>
</html>

Links:
jquery.js
jquery.contextmenu.r2.js

Demonstração