Audero Context Menu

TABLE OF CONTENT

• Home
• Examples
• How to use the plugin
• Configuration
  • init
  • show
  • hide

HOW TO USE THE PLUGIN

To have a custom context menu when a user right-click on one or more elements you have to include the CSS and the JavaScript files provided. You can add the CSS in this way:

<link href="/css/audero-context-menu.css" rel="stylesheet"
  type="text/css" />
      

The link to this plugin and to jQuery can be added in this way:

<script src="http://code.jquery.com/jquery.min.js"
  type="text/javascript"></script>
<script src="/javascript/audero-context-menu.js"
  type="text/javascript"></script>
      

If you want to use the compressed version of the plugin, you have to replace src="/javascript/audero-context-menu.js" with src="/javascript/audero-context-menu-min.js". The result should be this:

<script src="/javascript/audero-context-menu-min.js"
  type="text/javascript"></script>
      

Now that you have added all the files needed, you have to create the menu and to choose the element(s) to attach the menu. To create the menu you have to write a simple unordered list having "audero-context-menu" as class and an id (for example "context-menu-1"). The menu should looks like this:

<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>
      

The simplest method to attach the custom menu to an element is to use a single line of code. Let that you have a div having "area" as id inside your page, you have to write this code in order to active the menu.

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

Now, when you will right-click inside the specified element the custom context menu will be shown instead of the default one.
For more configuration options you can look at the configuration section. To see some examples you can look at the examples page.

CONFIGURATION

Starting from the pieces of code shown, here is a list of all the methods and the attributes you can employ in order to use this plugin.

ATTRIBUTES

The follow is a list of all the possible attributes that you can use to configure the menu. The ones in red are required. To use a detailed configuration you have to use an object.

• idMenu: The id of the menu that has to be shown.
• posX: The X coordinate used to show the menu. If the value is not set or is null the current position of the mouse will be used.
• posY: The Y coordinate used to show the menu. If the value is not set or is null the current position of the mouse will be used.

METHODS

The follow is a list that explains all the methods that you can use.

init (options)

Initialize the settings to show the context menu.

Parameters

• options: (object|string) An object with the paramaters for the menu. The possible values can be seen looking at the global var "defaultValues". If a string is provided, it is used as the id of the menu to show. If one of the coordinates value is null, the current position of the mouse will be used.

show (params[, event[, idElem]])

The method used to run the animation.
If you want to use it directly, for example to set that also on left-click the custom menu has to been shown, you have to write the code as you can see below. You can find more on this looking at example 3

Parameters

• params: (object|string) An object with the paramaters for the menu. The possible values can be seen looking at the global var "defaultValues". If a string is provided, it is used as the id of the menu to show. If the one of the coordinates value null, the current position of the mouse will be used.
• event: (object) (optional) The event that fired the method call.
• idElem: (string) (optional) The id of the element which the menu is attached.

Examples

// Show the menu having id "context-menu-1"
$().auderoContextMenu('show', 'context-menu-1', event);

// Show the menu having id "context-menu-2" in a fixed position
$().auderoContextMenu(
  'show',
  {
    'idMenu': 'context-menu-2',
    'posX': '500',
    'posY': '100'
  }
);
      

hide ([id])

The function used to hide one or more menu. This function is recursive.
If you want to use it directly, for example to hide a single menu or to hide all, you have to write code like these:

Parameters

• id: (array|string) This parameter is optional. If id is null or not defined, all the menus in "elementsSettings" will be hidden. Else an array of id or a single id can be provided. In this case only the specified menu(s) will be hidden.

Examples

// Hide all the menus
$().auderoContextMenu('hide');

// Hide the menu with id "context-menu-1"
$().auderoContextMenu('hide', 'context-menu-1');

// Hide the menus in the array ("context-menu-1" and "context-menu-2")
$().auderoContextMenu('hide', ['context-menu-1', 'context-menu-2']);