If you want display your own customized context menu on right mouse click, this program will help you.

Disable Context Menu

Whenever user right click on HTML document, The browser will show one default menu. We have to disable this first to display your own menu. You can do this by using below code.
<body oncontextmenu="return false">

Design  Your Own Context Menu

Design a DIV with absolute position and limited width. Find the following basic design.
.rightClickPanel {
  width:200px;
  padding:20px;
  position:absolute;
  border:1px solid #ccc;
  background:#ccc;
  display:none;
}

<div class="rightClickPanel" ng-style="rightPanelStyle">
My right panel
</div>

Set Style to Context Menu based on Mouse Position

  1. $event.which - Key code of event ( 3 for right mouse click )
  2. $event.clientX - X coordinate of mouse click
  3. $event.clientY - Y coordinate of mouse click
$scope.detectRightMouseClick = function($event) {
     if($event.which === 3) {
         $scope.rightPanelStyle = {'display':'block','left':$event.clientX + 'px','top':$event.clientY + 'px'}; 
          return false;
     } 
};

0 comments:

Blogroll

Follow this blog by Email

Popular Posts