Audero Context Menu

TABLE OF CONTENT

The following demos assume that you put the CSS and the JavaScript files in your page as explained in the how to use the plugin of the documentation page. These examples will use the following menus: 

<ul id="context-menu-1" class="audero-context-menu">
  <li>
    <a href="http://www.audero.it" target="_blank">
      Audero
    </a>
  </li>
  <li>
    <a href="http://ug.audero.it" target="_blank">
      Audero user group
    </a>
  </li>
  <li>
    <a href="http://www.picasabackup.com" target="_blank">
      Picasa backup
    </a>
  </li>
</ul>

<ul id="context-menu-2" class="audero-context-menu">
  <li>
    <a href="https://bitbucket.org/AurelioDeRosa/auderosmokeeffect"
       target="_blank">
      Audero Smoke Effect
    </a>
  </li>
  <li>
    <a href="https://bitbucket.org/AurelioDeRosa/audero-wav-extractor"
       target="_blank">
      Audero Wav Extractor
    </a>
  </li>
</ul>

EXAMPLE 1 (Basic)

Right-click here to show the custom menu.
Left-click here or click outside this area and the menu will disappear.

The example above uses the most basic configuration possible and that is just the id of the menu to show has been specified. 

<script type="text/javascript">
$(document).ready
(
  function()
  {
    $('#area').auderoContextMenu('context-menu-1');
  }
);
</script>

EXAMPLE 2

Right-click here to show a custom menu.
Right-click here to show another custom menu with fixed position.

As you can see in this example, you are able to attach a different context menu in different elements. Besides, the menu attached to the outer div has a fixed position. 

<script type="text/javascript">
$(document).ready
(
  function()
  {
    $('#big-area').auderoContextMenu(
      {
        'idMenu': 'context-menu-2',
        'posX': '500',
        'posY': '1400'
      }
    );
    $('#area').auderoContextMenu('context-menu-1');
  }
);
</script>

EXAMPLE 3

Click (right or left) here to show the custom menu.

This example is quite different from the previous. Infact also the left-click will show the menu. Please note the use of event.stopPropagation(); to not propagate the event to the parents element of the clicked one (in this example "area-3"). 

<script type="text/javascript">
$(document).ready
(
  function()
  {
    $('#area-3').auderoContextMenu('context-menu-1');
    $('#area-3').click(
      function(event)
      {
        $(this).auderoContextMenu('show', 'context-menu-1', event);
      }
    );
  }
);
</script>