jQuery Context Menu script

[hariharan_00]

Hi Friends,
Last time you guys did the great job and fixed my problems. So I thought to post here again since I am not able to solve one more problem. I want to create the jQuery script, so that anyone can associate a multi-level context menu to any element on the page. Please provide some coding so that it would be easy for me to understand. Once again thanks for the last time. Also expecting the same help now..!!

[CodGuru]

I think that using the jQuery for creating the context menus is the best option. Before moving to the code, I think that you should first understand the meaning of the context menu properly. Otherwise just checking the coding will not be much useful. A context menu, also called contextual, is a menu in a graphical user interface that appears upon user interaction. More commonly it happens when you use the right mouse click. Context menus usually open in a fixed position under the pointer. You can also use the jQuery plugin to create context (right-click) menus.

[void]

I am providing you with the sample of the coding that can be helpful while creating the Context Menu using the jQuery. The following is the code for same :

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

<script type="text/javascript" src="http://www.javascript.com/libs/jquery/1.3.2/jquery.js"></script>

<script type="text/javascript" src="mycontextmenu.js">

</script>

<script type="text/javascript">

$(elementselector).addcontextmenu('id_of_context_menu_on_page')
$(document).addcontextmenu('id_of_context_menu_on_page')

jQuery(document).ready(function($){
	$('a.mylinks').addcontextmenu('contextmenu1') //apply context menu to links with class="mylinks"
})


jQuery(document).ready(function($){
	$('img').addcontextmenu('contextmenu2') //apply context menu to all images on the page
})

</script>

[opaper]

You should be knowing that the context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application. The easiest way to define a context menu is to use JSON to define the options. The JSON structure is simply an Array with the options specified in order. The following example that I have provided demonstrates the same :

var menu1 = [ 
{'Option 1':function(menuItem,menu) { alert("You clicked first option!"); } }, 
$.contextMenu.separator, 
{'Option 2':function(menuItem,menu) { alert("You clicked second option"); } } 
]; 
$(function() 
 { 
   $('.cmenu1').contextMenu(menu1,{theme:'Windows7}); 
  });

[Solitario]

The steps mentioned by the 'void' is just for inserting code into the head section. You would also have to insert the coding into the Body of your HTML page. I have given you the sample of the coding which you have to add to the BODY of your page, which contains a link and an image, plus two context menus associated with them :

<p><a class="mylinks" href="http://www.demos.com">Demos</a></p>
<p><img src="http://www.imageloader.com/img547/751/autumn.jpg" /></p>


<!--HTML for Context Menu 1-->
<ul id="contextmenu1" class="jqcontextmenu">
<li><a href="#">Item A</a></li>
<li><a href="#">Item B</a></li>
<li><a href="#">Item Folder C</a>
	<ul>
	<li><a href="#">Sub Item 1a</a></li>
	<li><a href="#">Sub Item 2a</a></li>
	<li><a href="#">Sub Item 3a</a></li>
	<li><a href="#">Sub Item 4a</a></li>
	</ul>
</li>
<li><a href="#">Item D</a></li>
<li><a href="#">Item Folder E</a>
	<ul>
	<li><a href="#">Sub Item 1a</a></li>
	<li><a href="#">Item Folder 2a</a>
		<ul>
		<li><a href="#">Sub Item 2.1a</a></li>
		<li><a href="#">Sub Item 2.2a</a></li>
		<li><a href="#">Sub Item 2.3a</a></li>
		<li><a href="#">Sub Item 2.4a</a></li>
		</ul>
	</li>
	</ul>
</li>
<li><a href="#">Item F</a></li>
</ul>


<!--HTML for Context Menu 2-->
<ul id="contextmenu2" class="jqcontextmenu">
<li><a href="#">Item A</a></li>
<li><a href="#">Item B</a></li>
<li><a href="#">Item A</a></li>
<li><a href="#">Item B</a></li>
</ul>