Menu is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 13 August 2014
Most of menus are created during design time and mostly using HTML to create the structure of each menu. But this is limiting our design to always know how our menu will look like from beginning. There may be cases when we want to create menus in our application dynamically, on demand. We can do this either using built-in methods to create and add a new menu to the existing one, or using a remote data source to bind data to the menu. In following sections we will explain how to create menus with remote data binding using a JSON file as a data source.
At first we need to create the menu structure in JSON format. Here is a sample of a menu:
[
{
"id": 1,
"text": "File",
"items": [
{
"id": 11,
"pid": 1,
"text": "New",
"icon": "<span class='icons new' data-element='icon'></span>",
"items": [
{ "id": 111, "pid": 11, "text": "Project" },
{ "id": 112, "pid": 11, "text": "Window" }
]
},
{ "id": 12, "pid": 1, "text""Open" },
{ "id": 13, "pid": 1, "text""Save As...", "icon": "<span class='icons save' data-element='icon'></span>" },
{ "id": 14, "pid": 1, "text""Save All" },
{ "id": 15, "pid": 1, "type""separator" },
{ "id": 16, "pid": 1, "text""Page Setup" },
{ "id": 17, "pid": 1, "text""Print", "icon": "<span class='icons print' data-element='icon'></span>" },
{ "id": 18, "pid": 1, "type""separator" },
{ "id": 19, "pid": 1, "text""Exit" }
]
},
{
"id": 2,
"text": "Edit",
"items": [
{ "id": 21, "pid": 2, "text": "Undo" },
{ "id": 22, "pid": 2, "text": "Redo" },
{ "id": 23, "pid": 2, "type": "separator" },
{ "id": 24, "pid": 2, "text": "Cut" },
{ "id": 25, "pid": 2, "text": "Copy", "icon": "<span class='icons copy' data-element='icon'></span>" },
{ "id": 26, "pid": 2, "text": "Paste" },
{ "id": 27, "pid": 2, "text": "Delete", "icon": "<span class='icons delete' data-element='icon'></span>" }
]
},
{
"id": 3,
"text": "View",
"items": [
{ "id": 31, "pid": 3, "text": "Print Layout" },
{
"id": 32,
"pid": 3,
"text": "Zoom",
"icon": "<span class='icons zoom' data-element='icon'></span>",
"items": [
{ "id": 321, "pid": 32, "text": "Zoom In", "icon": "<span class='icons zoom-in' data-element='icon'></span>" },
{ "id": 322, "pid": 32, "text": "Zoom Out", "icon": "<span class='icons zoom-out' data-element='icon'></span>" },
{ "id": 323, "pid": 32, "type": "separator" },
{ "id": 324, "pid": 32, "text": "Restore" }
]
},
{ "id": 33, "pid": 3, "type": "separator" },
{ "id": 34, "pid": 3, "text": "Full Screen" }
]
},
{
"id": 4,
"text": "Help",
"items": [
{ "id": 41, "pid": 4, "text": "Search" },
{ "id": 42, "pid": 4, "text": "Documents" },
{ "id": 43, "pid": 4, "type": "separator" },
{ "id": 44, "pid": 4, "text": "About" }
]
}
]
Each menu item is an object which can have the following properties (in alphabetical order):
In our example we are only using few of above properties (mostly used) to create the structure of our menus.
After we have our structure, we can use jQuery getJSON method to load the content of our JSON file to the instance of menu widget. We will cycle to each item in our file to extract its content and add it to our menu using addItem method. This will create a menu item object for each item in our remote data source. Here is the code:
$(document).ready(function(){
var $menuBar = $('#menu').menu();
$.getJSON("data.json", function(data){
$.each(data, function(id, item){
$menuBar.menu('addItem', item);
});
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" href="css/integralui.menu.css" />
<link rel="stylesheet" href="css/themes/theme-dark.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.menu.min.js"></script>
</head>
<body>
<div id="menu" class="widget"></div>
</body>
</html>
<style type="text/css">
.widget
{
width: 600px;
height: 0;
}
.icons
{
background-image: url(../images/icons-business.png);
background-repeat: no-repeat;
display: inline-block;
overflow: hidden;
padding: 0;
margin: 0 1px;
width: 16px;
height: 16px;
}
.empty
{
background-position: 0px 0px;
}
.new
{
background-position: -16px 0;
}
.save
{
background-position: -32px 0;
}
{
background-position: -48px 0;
}
</style>
Because our data source is a tree structure, we only need to loop through root items, all child menu items are automatically created, which further improves overall load performance.
Instead of using a tree structure we can also use a flat structure as a data source. Here how the same data from the tree structure looks like in flat format:
[
{ "id": 1, "text": "File" },
{ "id": 11, "pid": 1, "text": "New", "icon": "<span class='icons new' data-element='icon'></span>" },
{ "id": 111, "pid": 11, "text": "Project" },
{ "id": 112, "pid": 11, "text": "Window" },
{ "id": 12, "pid": 1, "text": "Open" },
{ "id": 13, "pid": 1, "text": "Save As...", "icon": "<span class='icons save' data-element='icon'></span>" },
{ "id": 14, "pid": 1, "text": "Save All" },
{ "id": 15, "pid": 1, "type": "separator" },
{ "id": 16, "pid": 1, "text": "Page Setup" },
{ "id": 17, "pid": 1, "text": "Print", "icon": "<span class='icons print' data-element='icon'></span>" },
{ "id": 18, "pid": 1, "type": "separator" },
{ "id": 19, "pid": 1, "text": "Exit" },
{ "id": 2, "text": "Edit" },
{ "id": 21, "pid": 2, "text": "Undo" },
{ "id": 22, "pid": 2, "text": "Redo" },
{ "id": 23, "pid": 2, "type": "separator" },
{ "id": 24, "pid": 2, "text": "Cut" },
{ "id": 25, "pid": 2, "text": "Copy", "icon": "<span class='icons copy' data-element='icon'></span>" },
{ "id": 26, "pid": 2, "text": "Paste" },
{ "id": 27, "pid": 2, "text": "Delete", "icon": "<span class='icons delete' data-element='icon'></span>" },
{ "id": 3, "text": "View" },
{ "id": 31, "pid": 3, "text": "Print Layout" },
{ "id": 32, "pid": 3, "text": "Zoom", "icon": "<span class='icons zoom' data-element='icon'></span>" },
{ "id": 321, "pid": 32, "text": "Zoom In", "icon": "<span class='icons zoom-in' data-element='icon'></span>" },
{ "id": 322, "pid": 32, "text": "Zoom Out", "icon": "<span class='icons zoom-out' data-element='icon'></span>" },
{ "id": 323, "pid": 32, "type": "separator" },
{ "id": 324, "pid": 32, "text": "Restore" },
{ "id": 33, "pid": 3, "type": "separator" },
{ "id": 34, "pid": 3, "text": "Full Screen" },
{ "id": 4, "text": "Help" },
{ "id": 41, "pid": 4, "text": "Search" },
{ "id": 42, "pid": 4, "text": "Documents" },
{ "id": 43, "pid": 4, "type": "separator" },
{ "id": 44, "pid": 4, "text": "About" }
]
In this case we are going to use the built-in loadData method. This method accepts an array object which is returned from the call of getJSON method:
$.getJSON("data.json", function(data){
$menuBar.menu('loadData', data);
});
In either case, the result will be the same a menu created dynamically from a remote data source.