Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/malipetek/ccmenu.js
Custom context menu simplified for you.
https://github.com/malipetek/ccmenu.js
Last synced: about 1 month ago
JSON representation
Custom context menu simplified for you.
- Host: GitHub
- URL: https://github.com/malipetek/ccmenu.js
- Owner: malipetek
- Created: 2016-09-16T03:46:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-25T08:58:43.000Z (about 8 years ago)
- Last Synced: 2024-11-11T03:22:32.095Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CustomContextMenuJS
Context Menu Simplified For Front EndYou want to do add custom contextmenu to some item on your webpage?
You dont want to bother with styling and other stuff?
Here is an option for you. Simply include CustomContextMenu.js on your page and implement it like this:
```
CCmenu(Selector, [Array of menu items]);
```
```Selector```: this argument can be a html node like:
```
document.getElementById("blabla")
```
or a JQuery selector like:
```
$('div')
```
```Array of menu items```: this array should contain objects like this one:
```
{item: "some text", callBack: function(targetElement){something to do when clicked} }
```
At the end it should look like this:
```
CCmenu($('.class'), [
{
item: "some text",
callBack: function(targetElement){
something to do when clicked
}},
{
item: "some text2",
callBack: function(targetElement){
something to do when clicked2
}},
{
item: "some text3",
callBack: function(targetElement){
something to do when clicked3
}},
]);
```
Here is a working pen for you: http://codepen.io/malipetek/pen/amkzGmYou can include the file by pasting this to head section:
```
```>Please note that these keywords are occupied by this module in global/window environment:
>**"CCmenu", "CCmenuCoreObject", "CCmenuGlobalArray".**
>
>Please also note that these CSS classnames will be occupied by inserted CSS:
>**"rightclickmenu", "rightitem", "rightclickmenu-mobile", "rightitem-mobile", "rightitem:hover".**