Advanced User Interface Controls and Components
Specifies an object that map the fields names from data source to the ones used by the Menu.
| Variable | Type | Details |
|---|---|---|
| content (default: 'content') | String | Specifies the name of a property in your data source which represents a DOM element used as item content |
| dataSource (default: null) | Array | Specifies an array of item objects used as data source |
| icon (default: 'icon') | String | Specifies the name of a property in your data source which represents a DOM element used as item icon |
| id (default: 'id') | String | Specifies the name of a property in your data source which represents an unique identifier for an item |
| link (default: 'link') | String | Specifies the name of a property in your data source which represents a hyperlink related to this menu item |
| pid (default: 'pid') | String | Specifies the name of a property in your data source which represents an identifier for the item's parent |
| text (default: 'text') | String | Specifies the name of a property in your data source which represents an item label |
| type (default: 'type') | String | Specifies the name of a property in your data source which represents menu item type: text or separator |
An object with field names from a custom data source. Except for dataSource which is an array of objects, all other variables are the names inside of the array.
Supported in: v1.0.
In this example the Menu widget has dataFields set to a custom object used to map data fields from local data source. Using the names of data fields in this object, the Menu will become automatically populated with data stored in flatList array.
$(document).ready(function(){
var flatList = [
{ "itemId": "1", "text": "Dairy" },
{ "itemId": "11", "parentId": "1", "text": "Milk" },
{ "itemId": "12", "parentId": "1", "text": "Butter" },
{ "itemId": "13", "parentId": "1", "text": "Cheese" },
{ "itemId": "14", "parentId": "1", "text": "Yogurt" },
{ "itemId": "2", "text": "Fruits" },
{ "itemId": "21", "parentId": "2", "text": "Berries" },
{ "itemId": "211", "parentId": "21", "text": "BlackBerries" },
{ "itemId": "212", "parentId": "21", "text": "CranBerries" },
{ "itemId": "213", "parentId": "21", "text": "StrawBerries" },
{ "itemId": "22", "parentId": "2", "text": "Pits" },
{ "itemId": "23", "parentId": "2", "text": "Core" },
{ "itemId": "24", "parentId": "2", "text": "Citrus Fruits" },
{ "itemId": "241", "parentId": "24", "text": "Oranges" },
{ "itemId": "242", "parentId": "24", "text": "Lemons" },
{ "itemId": "25", "parentId": "2", "text": "Melons" },
{ "itemId": "26", "parentId": "2", "text": "Tropical Fruits" },
{ "itemId": "261", "parentId": "26", "text": "Avocados" },
{ "itemId": "262", "parentId": "26", "text": "Bananas" },
{ "itemId": "263", "parentId": "26", "text": "Dates" },
{ "itemId": "3", "text": "Grains" },
{ "itemId": "4", "text": "Meat" },
{ "itemId": "41", "parentId": "4", "text": "Beef" },
{ "itemId": "42", "parentId": "4", "text": "Lamb" },
{ "itemId": "421", "parentId": "42", "text": "Lamb Breast" },
{ "itemId": "422", "parentId": "42", "text": "Lamb Leg" },
{ "itemId": "423", "parentId": "42", "text": "Lamb Ribs" },
{ "itemId": "43", "parentId": "4", "text": "Pork" }
{ "itemId": "5", "text": "Sweets" }
{ "itemId": "6", "text": "Vegetables" }
{ "itemId": "7", "text": "Water" }
]
var $bar = $('#menu').menu({
// Map group data fields with fields from local data source
dataFields: {
id : 'itemId',
pid : 'parentId',
text : 'text'
dataSource : flatList
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.menu.css" />
<link rel="stylesheet" href="css/themes/theme-blue.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>
.widget
{
width: 600px;
height: 0;
}
A sample which demonstrates how to use local data to load the content in Menu.
A sample which demonstrates how to populate Menu widget using remote data binding. Access to remote data files is done using jQuery $http service.