js2/mwEmbed/jquery/plugins/jqueryContextMenu.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   2
   3 <html xmlns="http://www.w3.org/1999/xhtml">
   4
   5         <head>
   6                 <title>jQuery Context Menu Plugin Demo</title>
   7                 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   8
   9                 <style type="text/css">
  10                         BODY,
  11                         HTML {
  12                                 padding: 0px;
  13                                 margin: 0px;
  14                         }
  15                         BODY {
  16                                 font-family: Verdana, Arial, Helvetica, sans-serif;
  17                                 font-size: 11px;
  18                                 background: #FFF;
  19                                 padding: 15px;
  20                         }
  21
  22                         H1 {
  23                                 font-family: Georgia, serif;
  24                                 font-size: 20px;
  25                                 font-weight: normal;
  26                         }
  27
  28                         H2 {
  29                                 font-family: Georgia, serif;
  30                                 font-size: 16px;
  31                                 font-weight: normal;
  32                                 margin: 0px 0px 10px 0px;
  33                         }
  34
  35                         #myDiv {
  36                                 width: 150px;
  37                                 border: solid 1px #2AA7DE;
  38                                 background: #6CC8EF;
  39                                 padding: 1em .5em;
  40                                 margin: 1em;
  41                                 float: left;
  42                         }
  43
  44                         #myList {
  45                                 margin: 1em;
  46                                 float: left;
  47                         }
  48
  49                         #myList UL {
  50                                 padding: 0px;
  51                                 margin: 0em 1em;
  52                         }
  53
  54                         #myList LI {
  55                                 width: 100px;
  56                                 border: solid 1px #CCC;
  57                                 background: #EEE;
  58                                 padding: 2px 5px;
  59                                 margin: 2px 0px;
  60                                 list-style: none;
  61                         }
  62
  63                         #options {
  64                                 clear: left;
  65                         }
  66
  67                         #options INPUT {
  68                                 font-family: Verdana, Arial, Helvetica, sans-serif;
  69                                 font-size: 11px;
  70                                 width: 150px;
  71                         }
  72
  73                 </style>
  74
  75                 <script src="http://abeautifulsite.net/includes/jquery.js" type="text/javascript"></script>
  76                 <script src="jquery.contextMenu.js" type="text/javascript"></script>
  77                 <link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />
  78
  79                 <script type="text/javascript">
  80
  81                         $(document).ready( function() {
  82
  83                                 // Show menu when #myDiv is clicked
  84                                 $("#myDiv").contextMenu({
  85                                         menu: 'myMenu'
  86                                 },
  87                                         function(action, el, pos) {
  88                                         alert(
  89                                                 'Action: ' + action + '\n\n' +
  90                                                 'Element ID: ' + $(el).attr('id') + '\n\n' +
  91                                                 'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' +
  92                                                 'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
  93                                                 );
  94                                 });
  95
  96                                 // Show menu when a list item is clicked
  97                                 $("#myList UL LI").contextMenu({
  98                                         menu: 'myMenu'
  99                                 }, function(action, el, pos) {
 100                                         alert(
 101                                                 'Action: ' + action + '\n\n' +
 102                                                 'Element text: ' + $(el).text() + '\n\n' +
 103                                                 'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' +
 104                                                 'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
 105                                                 );
 106                                 });
 107
 108                                 // Disable menus
 109                                 $("#disableMenus").click( function() {
 110                                         $('#myDiv, #myList UL LI').disableContextMenu();
 111                                         $(this).attr('disabled', true);
 112                                         $("#enableMenus").attr('disabled', false);
 113                                 });
 114
 115                                 // Enable menus
 116                                 $("#enableMenus").click( function() {
 117                                         $('#myDiv, #myList UL LI').enableContextMenu();
 118                                         $(this).attr('disabled', true);
 119                                         $("#disableMenus").attr('disabled', false);
 120                                 });
 121
 122                                 // Disable cut/copy
 123                                 $("#disableItems").click( function() {
 124                                         $('#myMenu').disableContextMenuItems('#cut,#copy');
 125                                         $(this).attr('disabled', true);
 126                                         $("#enableItems").attr('disabled', false);
 127                                 });
 128
 129                                 // Enable cut/copy
 130                                 $("#enableItems").click( function() {
 131                                         $('#myMenu').enableContextMenuItems('#cut,#copy');
 132                                         $(this).attr('disabled', true);
 133                                         $("#disableItems").attr('disabled', false);
 134                                 });
 135
 136                         });
 137
 138                 </script>
 139         </head>
 140
 141         <body>
 142
 143                 <h1>jQuery Context Menu Plugin Demo</h1>
 144                 <p>
 145                         This plugin lets you add context menu functionality to your web applications.
 146                 </p>
 147
 148                 <p>
 149                         <strong>Tip:</strong> Try using your keyboard to make a selection.
 150                 </p>
 151
 152                 <p>
 153                         <a href="/notebook.php?article=69">Back to the project page</a>
 154                 </p>
 155
 156                 <h2>Demo</h2>
 157
 158                 <div id="myDiv">
 159                         Right click for the standard context menu
 160                 </div>
 161
 162                 <div id="myList">
 163                         <ul>
 164                                 <li>Item 1</li>
 165                                 <li>Item 2</li>
 166                                 <li>Item 3</li>
 167                                 <li>Item 4</li>
 168                                 <li>Item 5</li>
 169                                 <li>Item 6</li>
 170                         </ul>
 171                 </div>
 172
 173                 <div id="options">
 174                         <p>
 175                                 <input type="button" id="disableItems" value="Disable Cut/Copy" />
 176                                 <input type="button" id="enableItems" value="Enable Cut/Copy" disabled="disabled" />
 177                         </p>
 178
 179                         <p>
 180                                 <input type="button" id="disableMenus" value="Disable Context Menus" />
 181                                 <input type="button" id="enableMenus" value="Enable Context Menus" disabled="disabled" />
 182                         </p>
 183                 </div>
 184
 185                 <ul id="myMenu" class="contextMenu">
 186                         <li class="edit"><a href="#edit">Edit</a></li>
 187                         <li class="cut separator"><a href="#cut">Cut</a></li>
 188                         <li class="copy"><a href="#copy">Copy</a></li>
 189                         <li class="paste"><a href="#paste">Paste</a></li>
 190                         <li class="delete"><a href="#delete">Delete</a></li>
 191                         <li class="quit separator"><a href="#quit">Quit</a></li>
 192                 </ul>
 193
 194         </body>
 195 </html>