LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Context Menu / Multi Level

Right click to open the context menu

IntegralUI ContextMenu is a native AngularJS directive that allows you to create and add a context menu to a HTML element. ContextMenu directive can be attached to any other AngularJS directive or HTML element.

In case of this example, we have a <div> element, which when right-clicked will display a multi level context menu. ContextMenu can have different types of menu items: header, item and separator.

Whenever a menu item is clicked, the itemClick event is fired which you can handle in your code and set a custom operation. In case of this example, a pop-up window will appear stating the name of the clicked item.

For more information check out the source code of this sample.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.contextmenu.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.contextmenu.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<div class="block" iui-contextmenu="menuOptions">

<span>Right click to open the context menu</span>

</div>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", function($scope){

$scope.menuName = "menuSample";

$scope.defaultIcon = 'icons-medium empty';

 

$scope.data = [

{ id: 1, text: "Context Menu", type: "header" },

{

id: 2,

text: "New",

icon: "icons-medium new-document",

items: [

{ id: 21, pid: 1, text: "Project", icon: "icons-medium solution" },

{ id: 22, pid: 1, text: "Window" }

]

},

{ id: 3, text: "Open" },

{ id: 4, text: "Save As...", icon: "icons-medium save" },

{ id: 5, text: "Save All" },

{ id: 6, type: "separator" },

{

id: 7,

text: "Social",

icon: "icons-medium people",

items: [

{ id: 71, pid: 1, text: "Facebook", icon: "icons-medium facebook" },

{ id: 72, pid: 1, text: "Google Plus", icon: "icons-medium google-plus" },

{ id: 73, pid: 1, text: "Twitter", icon: "icons-medium twitter" }

]

},

{ id: 8, text: "Favorites" },

{ id: 9, type: "separator" },

{ id: 10, text: "Page Setup" },

{ id: 11, text: "Print", icon: "icons-medium print" },

];

 

$scope.menuOptions = {

itemIcon: 'icons-medium empty',

items: $scope.data,

itemClick: function(e){

alert("Menu item: " + e.item.text + " is clicked.");

}

}

});

.block

{

background: white;

border: thin solid gray;

width: 600px;

height: 300px;

}

.block span

{

color: #808080;

cursor: default;

display: block;

margin: 130px auto;

text-align: center;

}

.icons-medium

{

background-image: url(../resources/icons-x24.png);

background-repeat: no-repeat;

display: inline-block;

margin: 0 7px 0 0;

overflow: hidden;

padding: 0 !important;

width: 24px;

height: 24px;

vertical-align: middle;

}

.iui-contextmenu-item

{

width: 150px;

}

.header-item

{

margin-top: 2px;

}