<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Jeegoocontext, a jQuery context menu plugin</title>
<link href="style.css" rel="Stylesheet" type="text/css" />
<!-- Context menu default skin -->
<link href="jeegoocontext/skins/cm_default/style.css" rel="Stylesheet" type="text/css" />
<style type="text/css">#add{padding:0 10px</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.livequery.js"></script>
<script type="text/javascript" src="jeegoocontext/jquery.jeegoocontext.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('.context').jeegoocontext('menu', {
livequery: true,
widthOverflowOffset: 10,
heightOverflowOffset: 10,
submenuLeftOffset: -4,
submenuTopOffset: -5,
onSelect: function(e, context){
alert("You chose " + $(this).attr('id'));
}
});
$('#appPrep').change(function(){
$('#add').val($(this).val());
});
$('#add').click(function(){
var val = $('#nodeName').val().replace(/\s/g, '_');
if(/^\s*$/.test(val))
{
alert('Insert a name.');
return;
}
if(val.toLowerCase() == 'root' || $('#' + val).length > 0)
{
alert('This node already exists.');
return;
}
var parent = $('#parent').val();
if(parent == 'root')
{
$('#menu')[$('#appPrep').val().toLowerCase()]('<li id="' + val + '">' + val + '</li>');
}else{
var node = $('#' + parent);
var ul = node.find('> ul');
if(ul.length > 0)
{
ul[$('#appPrep').val().toLowerCase()]('<li id="' + val + '">' + val + '</li>');
}
else
{
node.append('<ul><li id="' + val + '">' + val + '</li></ul>');
}
}
$('#parent').append('<option value="' + val + '">' + val + '</option>');
$('#nodeName').val('');
});
});
//]]>
</script>
</head>
<body>
<div id="outer">
<div id="header">
<h1><span class="jg_red">J</span><span class="jg_green">ee</span><span class="jg_yellow">g</span><span class="jg_blue">oo</span>context, <span style="font-size:.7em">a jQuery context menu plugin</span></h1>
<h2>Copyright © 2009 - 2010 Erik van den Berg, <a href="http://www.planitworks.nl/jeegoocontext" target="_blank">http://www.planitworks.nl/jeegoocontext</a></h2>
</div>
<div id="content">
<h2>Dynamically added submenu items.</h2>
<p>When using livequery, items can be dynamically added to the menu.<br />Try using the input fields below to create a multilevel menu.<br />Clicking on the dynamically added items causes the onShow callback to fire.</p>
<label for="nodeName">Name: </label><input id="nodeName" type="text" maxlength="20" />
<select id="appPrep">
<option value="Append">Append</option>
<option value="Prepend">Prepend</option>
</select>
<label for="parent">To: </label>
<select id="parent">
<option value="root">root</option>
<option value="Option_1">Option 1</option>
</select>
<input id="add" type="button" value="Append" /><br /><br />
<h2 class="context">Right-click here to open the menu.</h2>
<br />
<a href="suckerfish.htm"><< Dropdown menu</a>
</div>
</div>
<!-- Context menu -->
<ul id="menu" class="jeegoocontext cm_default">
<li id="Option_1">Option 1</li>
</ul>
</body>
</html>