ContextMenu Right click anywhere on this page to view the context-menu options.

Specific Target

$('#cm1').puicontextmenu();
                                
<ul id="cm1" >
 <li />
    <ul >
        <li />
        <li />
    </ul >
 </li >
 <li />
 <li />
</ul >
                                
Name Type Default Description
autoDisplay boolean true Displays submenus without the mouse click
target jQuery object $(document) Target to attach the menu

No events.

Name Parameters Description
show - Shows Menu.
hide - Hides Menu.
getTarget - Gets the menu target.
isVisible - Returns visibility state of menu.
<script type="text/javascript">
    $('#cm1').puicontextmenu();   

    $('#cm2').puicontextmenu({
       target:$('#img1')
    });
</script>
                                
<img id="img1" src="resources/demo/images/galleria/galleria1.jpg" />

<ul id="cm2">
    <li><a data-icon="fa-caret-right">Next</a></li>
    <li><a data-icon="fa-caret-left">Prev</a></li>
</ul>

<ul id="cm1">
    <li> <a data-icon="fa-file-o">File</a>
        <ul> 
            <li><a data-icon="fa-plus">New</a>
                <ul>
                    <li><a>Project</a></li>
                    <li><a>Other</a></li>
                </ul>
            </li> 
            <li><a>Open</a></li> 
            <li><a>Quit</a></li> 
        </ul>
    </li>
    <li> <a data-icon="fa-edit">Edit</a>
        <ul>
            <li><a data-icon="fa-mail-forward">Undo</a></li>
            <li><a data-icon="fa-mail-reply">Redo</a></li>
        </ul>
    </li>
    <li>
        <a data-icon="fa-question">Help</a>
        <ul>
            <li><a>Contents</a></li>
            <li>
                <a data-icon="fa-search">Search</a>
                <ul>
                    <li><a>Text</a>
                        <ul>
                            <li><a>Workspace</a></li>
                        </ul>
                    </li>
                    <li><a>File</a></li>
                </ul>
            </li>

        </ul>

    </li>
    <li>
        <a data-icon="fa-gear">Actions</a>
        <ul>
            <li><a data-icon="fa-refresh">Edit</a>
                <ul>
                    <li><a data-icon="fa-save">Save</a></li>
                    <li><a data-icon="fa-save">Update</a></li>
                </ul>
            </li>
            <li><a data-icon="fa-phone">Other</a>
                <ul>
                    <li><a data-icon="fa-minus">Delete</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a data-icon="ui-icon-close">Quit</a>
    </li>
</ul>