Skip to content
This repository has been archived by the owner on Jul 22, 2023. It is now read-only.

nils-soderman/CtxMenu-Javascript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

62 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CtxMenu (Javascript)

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

preview

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");