Bootstrap Context Menu

HTML
<table id="myTable" class="table table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" > <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul>
CSS
JAVASCRIPT
(function ($, window) { $.fn.contextMenu = function (settings) { return this.each(function () { // Open context menu $(this).on("contextmenu", function (e) { // return native menu if pressing control if (e.ctrlKey) return; //open menu var $menu = $(settings.menuSelector) .data("invokedOn", $(e.target)) .show() .css({ position: "absolute", left: getMenuPosition(e.clientX, 'width', 'scrollLeft'), top: getMenuPosition(e.clientY, 'height', 'scrollTop') }) .off('click') .on('click', 'a', function (e) { $menu.hide(); var $invokedOn = $menu.data("invokedOn"); var $selectedMenu = $(e.target); settings.menuSelected.call(this, $invokedOn, $selectedMenu); }); return false; }); //make sure menu closes on any click $('body').click(function () { $(settings.menuSelector).hide(); }); }); function getMenuPosition(mouse, direction, scrollDir) { var win = $(window)[direction](), scroll = $(window)[scrollDir](), menu = $(settings.menuSelector)[direction](), position = mouse + scroll; // opening menu would pass the side of the page if (mouse + menu > win && menu < mouse) position -= menu; return position; } }; })(jQuery, window); $("#myTable td").contextMenu({ menuSelector: "#contextMenu", menuSelected: function (invokedOn, selectedMenu) { var msg = "You selected the menu item '" + selectedMenu.text() + "' on the value '" + invokedOn.text() + "'"; alert(msg); } });
Expand for more options Login