1. Introduction
Context.js is a lightweight jQuery library for contextual menus. The plugin was designed with the Bootstrap framework in mind but can be also used separately with a standalone stylesheet. Context.js plugin has many features like recursive menus support, horizontal space detection, adding/removing menu items programmatically, event-based links and many more. The plugin comes with multiple configuration options and it is easy to integrate with any website or application.
2. Plugin Overview
Library | Context.js |
Author | Jacob Kelley |
Licence | MIT Licence |
Repository | GitHub |
Dependencies | Bootstrap 4.1.3 and jQuery 1.3.1 or Latest version |
3. How to install and use Context.js jQuery plugin
To install Context.js jQuery plugin, follow below steps.
1. Load jQuery and Bootstra assets (CSS styles and JS files) into your website:
2. Include context menu’s CSS and JavaScript files:
3. Create DIV element on which the context menu will be attached:
4. Programmatically add menu items:
5. Initialize Context.js plugin and attach menu structure to our DIV using the following:
Context.js the plugin will attach the right mouse click to DIV panel and show the context menu instead of the default browser menu.
4. Conclusion
In this article, we showcased Context.js jQuery plugin that can be used to create an awesome context menu with submenu items. The plugin is easy to configure and can be attached to any HTML element. For example, web developers can use it to present an action list for selected table items.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}