Location: PHPKode > scripts > wpStoreCart > wpstorecart/js/jeegoocontext/dynamicallyaddeditems.htm
<!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 &copy; 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">&lt;&lt; Dropdown menu</a>       
        </div>                
    </div>
       
     <!--  Context menu -->
    <ul id="menu" class="jeegoocontext cm_default">
        <li id="Option_1">Option 1</li>
    </ul>    
</body>
</html>
Return current item: wpStoreCart