jQuery ContextMenu Getting Started

Home >Shield UI Documentation >ContextMenu >JavaScript >jQuery ContextMenu Getting Started

The ContextMenu widget allows you to choose one of many possible options. The underling element from which the widget is initialized can be a UL or DIV element. In order to render the component on a webpage, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add a UL or DIV element to render the widget.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield DropDown</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>
<body>

<ul id="contextmenu1">
    <li>Cut</li>
	<li>Copy</li>
	<li>Paste</li>
</ul>

<div id="contexttarget" style="margin-left:40px; width:400px; height:300px; display:inline-block; background-color: #e3e3e3;">
    <ul style="margin-top:100px; margin-left:100px;">
        <li>Row One</li>
        <li>Row Two</li>
    </ul>
</div>

<script type="text/javascript">
    $("#contextmenu1").shieldContextMenu({
        target: "#contexttarget",
        filter: "li"
    });
</script>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.