Audero Context Menu

Audero Context Menu is a cross-browser jQuery plugin that allows you to show a custom context menu on one or more specified elements.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="path/to/auderoContextMenu.css" />
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.auderoContextMenu.js"></script>

2. HTML

Once you have all the files in place, you have to create the menu and choose the element(s) that will interact with it. The menu is a simple unordered list having audero-context-menu as class and an arbitrary id (for example context-menu-1). An example of how you can write the menu is shown below:

<ul id="context-menu-1" class="audero-context-menu">
  <li><a href="js-tutorial.com" target="_blank">js-tutorial.com</a></li>
  <li><a href="js-tutorial.com" target="_blank">js-tutorial.com</a></li>
  <li><a href="js-tutorial.com" target="_blank">js-tutorial.com</a></li>
</ul>

<div id="area-1" class="area">
   Right-click here to show the custom menu.<br />
   Left-click here or click outside this area and the menu will disappear.
</div>

3. JAVASCRIPT

$(document).ready(function() {
      $("#area-1").auderoContextMenu("context-menu-1");
});

4. OPTIONS

Audero Context Menu has few options you can set during the call to the auderoContextMenu() method. The options are:

• idMenu (string. Default: ""): The id of the menu that has to be shown.
• posX (number. Default: null): 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 (number. Default: null): 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.
• bindLeftClick (boolean. Default: false): If the menu has to be shown also on mouse left button click.

5. DESTROY

In some cases, you may want to remove the effect of this plugin. To achieve this goal, you can call the auderoContextMenu() method passing the string destroy.

Let's say that you want to delete the effect of the plugin on an element having ID area-1 as soon as a button having ID button-destroy is clicked. To do that, you can write a code like the following:

<script>
   $("#button-destroy").click(function() {
      $("#area-1").auderoContextMenu("destroy");
   });
</script>