In this tutorial I am sharing my newly created jQuery Plugin, jQuery Simple Context Menu.
GITHUB REPO :
https://github.com/nirajmchauhan/jquery-simple-context-menu
Currently this plugin accepts two paramenters:
- Custom HTML - You have to give entire HTML code with proper attributes in it wrapped inside
ul
Simple HTML - You have to pass href link and the text to be shown.
Simple HTML usage
Include the jquery file, you can download this from github.
[js]
jQuery(function($){
$(document).ready(function(){
$('#Simple').simpleContextMenu({
options : {
'Home' : '#',
'About Us' : '#',
'Services' : '#',
'Contact Us' : '#'
}
});
});
});
[/js]
Inside options you need to pass text and the link, the above code will generate a HTML in following format :
[html]
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
[/html]
Custom HTML usage
[js]
jQuery(function($){
$(document).ready(function(){
$('#CustomHTML').simpleContextMenu({
html: '<div class="dropdown clearfix"><ul style="display: block; position: static; margin-bottom: 5px; *width: 180px;" aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu"><li><a href="#" tabindex="-1">Action</a></li><li><a href="#" tabindex="-1">Another action</a></li><li><a href="#" tabindex="-1">Something else here</a></li><li class="divider"></li><li><a href="#" tabindex="-1">Separated link</a></li></ul></div>'
});
});
});
[/js]
Inside html you need to pass entire html which will be the context menu. Above I am using bootstrap.
Both parameters cannot be used together, use only one at a time. You can have multiple context menus on a single page. Check out the demo and fork me.
