Multi-Level Right-Click (Context) Menu with jQuery and Bootstrap - ContextJS

File Size: 9.11KB
Views Total: 20463
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Multi-Level Right-Click (Context) Menu with jQuery and Bootstrap - ContextJS

ContextJS is a lightweitht jQuery plugin that makes it easy to create multi-level right mouse-click (context) menu with event based links support.

ContextJS comes with 2 versions of stylesheets to build your context menu.

  • context.bootstrap.css - which works with twitter's bootstrap. 
  • context.standalone.css - which allows to give the context menu it's base styles.

You might also like:

Basic Usage:

1. Load the latest jQuery javascript library and jQuery ContextJS plugin at the bottom of your page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="context.js"></script> 

2. Include required jQuery ContextJS stylesheet in the head section of your page

<link rel="stylesheet" type="text/css" href="context.standalone.css">

3. Create the context menu in the javascript

$(document).ready(function(){

context.init({preventDoubleContext: false});

context.settings({compress: true});

context.attach('html', [
{header: 'Compressed Menu'},
{text: 'Back', href: '#'},
{text: 'Reload', href: '#'},
{divider: true},
{text: 'Save As', href: '#'},
{text: 'Print', href: '#'},
{text: 'View Page Source', href: '#'},
{text: 'View Page Info', href: '#'},
{divider: true},
{text: 'Inspect Element', href: '#'},
{divider: true},
{text: 'Disable This Menu', action: function(e){
e.preventDefault();
context.destroy('html');
alert('html contextual menu destroyed!');
}},
{text: 'Donate', action: function(e){
e.preventDefault();
$('#donate').submit();
}}
]);

});

4. Settings

context.init({
fadeSpeed: 100, // The speed in which the context menu fades in (in milliseconds)
filter: function ($obj){}, // Function that each finished list element will pass through for extra modification.
above: 'auto', // If set to 'auto', menu will appear as a "dropup" if there is not enough room below it. Settings to true will make the menu a "popup" by default.
preventDoubleContext: true, // If set to true, browser-based context menus will not work on contextjs menus.
compress: false // If set to true, context menus will have less padding, making them (hopefully) more unobtrusive

This awesome jQuery plugin is developed by contextjs. For more Advanced Usages, please check the demo page or visit the official website.