In this blog I’m explaining about Bootstrap contextmenu.

Discription:

A contextual menu is a graphical user interface menu that appears on user interactions such as right-mouse clicks or middle-click mouse operation. This menu only offers a limited set of choices based on the application's current state. The choices available are related to the object that has been selected. 

Contextual menus are also referred to as context, shortcut or pop-up menus.

To implement custom right click context menu using Bootstrap we need to write the code as shown below.

Firstly you create html page.

Add bellow files in your page:

 

<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

and the after write javascript code:

 
<script type="text/javascript">
    $(window).load(function () {
        (function ($, window) {
            $.fn.contextMenu = function (settings) {
                return this.each(function () {
                    $(this).on("contextmenu", function (e) {
                        $(settings.menuSelector)
                            .data("invokedOn", $(e.target))
                            .show()
                            .css({
                                position: "absolute",
                                left: getLeftLocation(e),
                                top: getTopLocation(e)
                            })
                            .off('click')
                            .on('click', function (e) {
                                $(this).hide();
 
                                var $invokedOn = $(this).data("invokedOn");
                                var $selectedMenu = $(e.target);
 
                                settings.menuSelected.call(this, $invokedOn, $selectedMenu);
                            });
 
                        return false;
                    });
                });
 
                function getLeftLocation(e) {
                    var mouseWidth = e.pageX;
                    var pageWidth = $(window).width();
                    var menuWidth = $(settings.menuSelector).width();
                    if (mouseWidth + menuWidth > pageWidth &&
                        menuWidth < mouseWidth) {
                        return mouseWidth - menuWidth;
                    }
                    return mouseWidth;
                }
 
                function getTopLocation(e) {
                    var mouseHeight = e.pageY;
                    var pageHeight = $(window).height();
                    var menuHeight = $(settings.menuSelector).height();
                    if (mouseHeight + menuHeight > pageHeight &&
                        menuHeight < mouseHeight) {
                        return mouseHeight - menuHeight;
                    }
                    return mouseHeight;
                }
 
            };
        })(jQuery, window);
 
        $("#myTable td").contextMenu({
            menuSelector: "#contextMenu",
            menuSelected: function (invokedOn, selectedMenu) {
                //console.log($(invokedOn).close.first().html());
                var tr = $(invokedOn).parent("tr");
                alert($(tr).find('td:not(:empty):first').html());
            }
        });
    });  
 
</script>

Html code:

 

<div style="width:80%;margin:100px auto;">
    <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>Kamlakar</td>
                <td>Singh</td>
                <td>abc&#64;gmail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Rohit</td>
                <td>Kesharwani</td>
                <td>abc&#64;outlook.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Pawan</td>
                <td>Shukla</td>
                <td>abc&#64;yahoo.com</td>
            </tr>
        </tbody>
    </table>
</div>
 
<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>

 in my next post i'll explain about Convert Text Document to PDF File