PopMenu is a jQuery plugin that lets you add right-click context menu (popup menu) to any HTML element on your web page! Not only for desktop users, PopMenu can also provide context menu for mobile users with touch screen by long-tapping.
Using PopMenu is easy. But before we begin, PopMenu requires several JS and CSS files to work. Therefore, load the following files in the HEAD section of the page.
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.popmenu.js"></script> <link type="text/css" rel="stylesheet" href="css/jquery.popmenu.css" /> <link type="text/css" rel="stylesheet" href="css/jquery.popmenu.icons.css" />
Once the files are loaded, we could assign PopMenu to any HTML elements. Let's say we want to assign a context menu to a button. To assign a separator, add an item without label. Each menu item consists of an ID and options. Please note that the ID of all menu items, including submenu items in a single context menu group must be unique.
<input type="button" id="MyButton" value="Right Click Here" /> <script type="text/javascript"> $(function() { $('#MyButton').popmenu({ itemId1: {label: 'Item One', action: eventHandler}, separator: {}, itemId2: {label: 'Item Two', action: eventHandler}, }); }); function eventHandler() { /* Function to be executed when an item is selected */ } </script>
Please refer to Examples for more advanced usages of PopMenu.
Calling $(elm).popmenu() without any parameters will return you an instance of PopMenu object. With this object, you could add, remove, and access menu items. Each menu item is an instance of PopMenuItem. Consult these two classes for more information regarding available methods and options.
// To access PopMenu instance $(elm).popmenu(); // To access menu item $(elm).popmenu().find('item_id'); // To add a new item $(elm).popmenu().append('item_id', {label: 'Item Label'}); // To remove an item $(elm).popmenu().remove('item_id');