May 1, 2013

jQuery Context Menu


In this tutorial I am sharing my newly created jQuery Plugin, jQuery Simple Context Menu.


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.

1 comment :