What it does
The following examples show the Context Menu plugin in action. Just make a right-click as you are used to in your faviourite OS. The first list item has a context menu defined as a JSON object and passed to the plugin within the JavaScrip. The second one has a menu defined in the HTML accordion to the menu structure for the Foundation DropdownMenu.
For the basic setup, just take any HTML element you want and add an data-context-menu
attribute to it. The value depends on the way you want to use this plugin. The possibilities can be found below.
For further information please visit the Project on GitHub.
Currently this plugin is still in development, and thus in a version 0.0.x, which works well with Foundation for sites 6.2.3. It is planned to release the first stable version of this plugin once Foundation for sites version 6.3 is released.
HTML Example
This example uses a predefined HTML list, formed according to the Foundation Dropdown Menu syntax to hold the context menu. You only need to give your context menu list an ID and then reference it in the list's data-context-menu
attribute. Notice the leading #
to indicate that it points to an HTML element.
- Some document
- Another document
- Important presentation
<ul class="context menu dropdown vertical" role="menu" id="menu">
<li role="menuitem"><a href="javascript:alert('Copying...');">Copy</a></li>
<li role="menuitem"><a href="javascript:alert('Moving...');">Move</a></li>
<li role="menuitem"><a href="javascript:alert('Deleting...');">Delete</a></li>
</ul>
JSON Example
You can also define the context menu using JSON. Just register the menu type in the plugin and then reference the registered name in the list's data-context-menu
attribute.
- Some document
- Another document
- Important presentation
Foundation.ContextMenu.prototype.addConfig('listitem', {
accessible: true,
single: true,
structure: [{
text: 'Move to',
help: 'Alt + M',
key: 'ALT_M',
click: function($item) {
alert('Moving item: ' + $item.index());
}
}, {
icon: 'fa fa-paper-plane',
text: 'Send via mail',
click: function($item) {
alert('Sending a mail!');
}
}, {
cssclass: 'divider'
}, {
text: 'More...',
children: [{
text: 'Delete',
isDisabled: true,
}, {
text: 'Download...',
children: [{
text: 'Save as PDF'
}, {
text: 'Save as PNG'
}]
}]
}]
});
Creating Context Menus with JS
It is also possible to open context menus on the fly without attaching them to an actual HTML element. This approach is based on the JSON method shown above. Creating the plugin instance on demand might me helpful when dealing with dynamic applications that keep on re-rendering parts of the page.
- Some document
- Another document
- Important presentation
$('#javascript-example-list li').on('contextmenu', function(event) {
event.preventDefault();
var jsContextMenu = new Foundation.ContextMenu($(this), {
position: event,
structure: [{
text: 'Move to',
click: function($item) {
alert('Moving item: ' + $item.index());
}
}, {
icon: 'fa fa-paper-plane',
text: 'Send via mail',
click: function($item) {
alert('Sending a mail!');
}
}]
});
// Destroy context menu once it's closed
$(this).one('hide.zf.contextmenu', function() {
jsContextMenu.destroy();
});
});
Interacting
To actually do something with the user's interaction, you can use the custom contextselect.zf.contextmenu
-event. This will be triggered for the menu's anchor element (i.e. the element containing the data-context-menu
-attribute) once an option out of the context menu is chosen. The event carries an object of data that helps you handling the selection:
element
: The menu's anchor element (li
-element).option
: The selected context menu entry (a
-element).
Options
The following options can be used.
-
single
If only one menu should be open at a time.
Default istrue
. -
accessible
If ARIA attributes should be added.
Default istrue
. -
touchdelay
Delay for touch event before the menu opens.
Default is400
. -
screenOffset
Minimum offset to the screen.
Default is10
. -
closeOnClick
If the menu should be closed after clicking an option.
Default istrue
. -
emptyEntryWillCloseMenu
If the menu should be closed if an option without a click function was clicked.
Default istrue
. -
position
Event to display the context menu directly when using pure JS.
Default isnull
.