audero-context-menu
Advanced tools
Audero Context Menu is a jQuery plugin to show a custom context menu on one or more specified elements.
Audero Context Menu is a cross-browser jQuery plugin that allows you to show a custom context menu on one or more specified elements.
A live demo is available here.
Being a jQuery plugin, the only requirement is jQuery starting from version 1.7.
It has been tested and works on all the major browsers, including Internet Explorer 6 and later.
Audero Context Menu follows the UMD (Universal Module Definition) pattern to work seamlessly with module systems such as AMD and CommonJS, and the browser.
You can install Audero Context Menu by using npm:
npm install audero-context-menu
Alternatively, you can install it via Bower:
bower install audero-context-menu
Alternatively, you can manually download it.
Remember to include the JavaScript file after the jQuery library, ideally before the
closing body tag:
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.auderoContextMenu.js"></script>
</body>
The CSS file should be placed in the head of your web page as shown below:
<head>
<link rel="stylesheet" href="path/to/auderoContextMenu.css" />
To use Audero Context Menu with Browserify, you have to write:
require('audero-context-menu')();
If you want to specify the global environment and augment a specific version of jQuery, you can pass both to the plugin:
var jQuery = require('jquery');
require('audero-context-menu')(window, jQuery);
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="http://www.audero.it" target="_blank">Audero</a></li>
<li><a href="https://twitter.com/AurelioDeRosa" target="_blank">Aurelio De Rosa on Twitter</a></li>
<li><a href="https://github.com/AurelioDeRosa" target="_blank">Aurelio De Rosa on GitHub</a></li>
</ul>
Now that you created the menu, you have to attach it to one or more elements. To achieve this goal, you have to call
the auderoContextMenu() method, passing the id of the menu, on the desired element(s).
For example, let that you have the following code:
<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>
A basic call to the plugin is:
<script>
$(document).ready(function() {
$('#area-1').auderoContextMenu('context-menu-1');
});
</script>
Please note that the previous snippet is a shortcut for:
<script>
$(document).ready(function() {
$('#area-1').auderoContextMenu({
idMenu: 'context-menu-1'
});
});
</script>
You can read more on the meaning of idMenu and the other options available in the Options section.
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>
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.Audero Context Menu has been developed following the
current best practices in developing plugins for jQuery. Therefore, it exposes the previously cited options through
the defaults object, allowing you to override the properties' default value. Changing the default values, you don't
need to specify them again when you call the auderoContextMenu() method. For example, let that you have the following
code:
<script>
$(document).ready(function() {
$('#area-1').auderoContextMenu({
idMenu: 'context-menu-1',
bindLeftClick: true
});
$('#area-2').auderoContextMenu({
idMenu: 'context-menu-2',
bindLeftClick: true
});
});
</script>
Overriding the default values you can turn it into the following:
<script>
$(document).ready(function() {
$.fn.auderoContextMenu.defaults.bindLeftClick = true;
$('#area-1').auderoContextMenu({
idMenu: 'context-menu-1'
});
$('#area-2').auderoContextMenu({
idMenu: 'context-menu-2'
});
});
</script>
This example shows you how, with few changes, you can display the menu in a fixed position. All you have to do is
to place the menu (the <ul>) inside the element you want to attach the plugin and set the CSS position attribute
of the latter to relative.
So, your HTML code should look like this:
<div id="area-2" class="area">
Right-click here to show another custom menu with <b>fixed position</b>.<br />
Left-click here or click outside this area and the menu will disappear.
<ul id="context-menu-2" class="audero-context-menu">
<li><a href="http://www.audero.it" target="_blank">Audero</a></li>
<li><a href="https://www.jquery.com" target="_blank">jQuery.com</a></li>
</ul>
</div>
Then, you need to have the following style somewhere in your page:
#area-2
{
position: relative;
}
Finally, to show the menu at 10px from the left margin and 20px from the top margin of the element position, you
have to write the following code:
<script>
$(document).ready(function() {
$('#area-2').auderoContextMenu({
idMenu: 'context-menu-2',
posX: 10,
posY: 20
});
});
</script>
This example shows how you can have the custom context menu also for the mouse left button click event. Let's that you have the same HTML code listed in the Usage section, you have to write:
<script>
$(document).ready(function() {
$('#area-1').auderoContextMenu({
idMenu: 'context-menu-1',
bindLeftClick: true
});
});
</script>
Audero Context Menu is dual licensed under MIT and GPL-3.0.
FAQs
Audero Context Menu is a jQuery plugin to show a custom context menu on one or more specified elements.
We found that audero-context-menu demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.