CtxMenu (Javascript)
A modern, light weight, object oriented solution for adding right click context menus for your website.
Installation
- Download the latest version
- Upload the CtxMenu folder to your server
- Add the script to the html code of the pages where you'd like to use it
<script src="./ctxmenu.min/ctxmenu.min.js"></script>
Note: You must ensure the "src" points to the location of the script on your server.
Getting Started
The basic setup of a menu:
// Initialize a context menu for the entire page
var contextMenu = CtxMenu();
// Add an item to the menu
contextMenu.addItem("Hello World", function(){
alert("Hello World!")
});
Documentation
CtxMenu Initialization:
// Examples of different ways to initialize a context menu:
// Initialize a context menu for the entire page
var myContextMenu = CtxMenu();
// Initialize a context menu for a element defined by it's id
var myContextMenu = CtxMenu("#example");
// Initialize a context menu for a element defined by it's class
var myContextMenu = CtxMenu(".example");
// Initialize a context menu for all types of a certain element by using a nodeName
// The example below will create a context menu for all paragraphs on the page (<p></p>)
var myContextMenu = CtxMenu("p");
// Initialize a context menu for a element variable
var myElement = document.getElementById("example");
var myContextMenu = CtxMenu(myElement);
CtxMenu Functions:
addItem( text, function, ?icon, ?index )
Appends a new item to the menu.
| Arguments | Description |
|---|---|
| text | The text that will be displayed in the menu |
| function | The function to be called when the item is clicked |
| icon | Url to an icon to be displayed before the text |
| index | The list index where to insert the item |
| Return Value |
|---|
| The DIV element of the created seperator |
myItem = myContextMenu.addItem("Text Here", myFunction, icon = "myIcon.png", index = 0);
addSeparator( ?index )
Adds a horizontal line to the menu
| Arguments | Description |
|---|---|
| index | The list index where to insert the item |
| Return Value |
|---|
| The DIV element of the created seperator |
mySeparator = myContextMenu.addSeparator(index = 1);
getItems()
Get all items in the context menu.
| Return Value |
|---|
| A list with all of the DIV elements |
myItems = myContextMenu.getItems();
getItemAtIndex( index )
Get the DIV of an item based on the index. This includes separators too
| Arguments | Description |
|---|---|
| index | The index of the item |
| Return Value |
|---|
| The DIV element |
myItem = myContextMenu.getItemAtIndex(0);
Other Functions:
CtxMenuBlock( element )
Block all context menus for this element (nothing will happen on right click)
CtxMenuBlock("#MyClass");
CtxMenuDefault( element )
Set the browsers default context menu on a specified element. Useful if E.g. you create a custom context menu for the entire page but would like all text inputs to still use the default context menu.
CtxMenuDefault(".MyClass");
![[question] multiple context menus](https://avatars.githubusercontent.com/u/686220?v=4)
2 Jun 21, 2022
38 Jun 4, 2022
8 Oct 28, 2022
5 Oct 23, 2022
172 Dec 12, 2022
3 Dec 29, 2022
22 Dec 8, 2022
10 Aug 15, 2022
11 Dec 12, 2022
4 Nov 5, 2022
11 Aug 11, 2022
74 Dec 31, 2022
16 Aug 8, 2022
8 Dec 31, 2022
2 Jun 1, 2022
34 Dec 12, 2022
6 Jun 23, 2022
61 Nov 27, 2022
1 Feb 5, 2022