https://github.com/isaeken/jquery.context-menu

jQuery based context menus be like Material Design.
https://github.com/isaeken/jquery.context-menu

context-menu jquery material-design material-ui

Last synced: 2 days ago
JSON representation

jQuery based context menus be like Material Design.

• Host: GitHub
• URL: https://github.com/isaeken/jquery.context-menu
• Owner: isaeken
• License: mit
• Created: 2020-05-11T02:12:25.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-11-27T08:10:25.000Z (almost 4 years ago)
• Last Synced: 2024-05-01T15:28:24.409Z (7 months ago)
• Topics: context-menu, jquery, material-design, material-ui
• Language: JavaScript
• Homepage:
• Size: 211 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jQuery Context Menu

![jQuery Context Menu](https://i.imgyukle.com/2020/05/11/reOHzy.png)

## Usage

### with html

    
  

	    
  

	        
  

	              

	                This is a link!  

	              

	        
  

	        
  

	              

	                JavaScript!  

	              

	        
  

	    
  

	    Left click here  

    


### with javascript

  

    


    

    var contextMenu = $('#element').contextMenu();

    contextMenu.button = mouseButton.LEFT;

    contextMenu.menu().addItem('This is <b>first</b> item!');

    contextMenu.menu().addItem('<b>Item</b> content', 'https://www.isaeken.com.tr');

    contextMenu.menu().addItem('This is <u>Third</u> item', function () {  

	    alert('Hello world!');  

	});

	contextMenu.menu().addItem('<span class="material-icons">bookmark</span>Item with Material Icon');

	contextMenu.menu().addItem('<i class="fab fa-npm"></i>Item with Font Awesome');

	contextMenu.menu().addItem('Click to delete me!', function () {  

	    contextMenu.menu().removeItem(5);

    });

    contextMenu.menu().addItem('Change trigger: <b>Mouse LEFT</b>', function () {  

	    contextMenu.button = mouseButton.LEFT;  

	    contextMenu.update();  

	});

	contextMenu.menu().addItem('Change trigger: <b>Mouse MIDDLE</b>', function () {  

	    contextMenu.button = mouseButton.MIDDLE;  

	    contextMenu.update();  

	});  

	contextMenu.menu().addItem('Change trigger: <b>Mouse RIGHT</b>', function () {  

	    contextMenu.button = mouseButton.RIGHT;  

	    contextMenu.update();  

	});

	contextMenu.menu().addItem('onclick event', function () {  

	    contextMenu.onclick = function () {  

	        $('#log').append('You are clicked!<br>');  

	        this.close();  

	    }

	});

	contextMenu.menu().addItem('onopen event', function () {  

	    contextMenu.onopen = function () {  

	        $('#log').append('Context menu opened!<br>');  

	    }  

	});

	contextMenu.init();