CtxMenu (Javascript)

A modern, light weight, object oriented solution for adding right click context menus for your website.

demo

Installation

1. Download the latest version
2. Upload the CtxMenu folder to your server
3. 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");