Advanced User Interface Controls and Components
Specifies an object that map the fields names from data source to the ones used by the Accordion.
Variable | Type | Details |
---|---|---|
content (default: 'content') | String | Specifies the name of a property in your data source which represents a DOM element used as group content panel |
dataSource (default: null) | Array | Specifies an array of group objects used as data source |
headerContent (default: 'content') | String | Specifies the name of a property in your data source which represents a DOM element used as group header |
icon (default: 'icon') | String | Specifies the name of a property in your data source which represents a DOM element used as group icon |
id (default: 'id') | String | Specifies the name of a property in your data source which represents an unique identifier for an group |
text (default: 'text') | String | Specifies the name of a property in your data source which represents an group header title |
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.
This property is accessed through 'dataFields' option of Accordion widget.
Supported in: v1.0.
In this example the Accordion widget has dataFields set to a custom object used to map data felds from local data source. Using the names of data fields in this object, the Accordion will become automatically populated with data stored in the array.
$(document).ready(function(){
var localData = [
{ "id": "1", "text": "Dairy" },
{ "id": "2", "text": "Fruits" },
{ "id": "3", "text": "Grains" },
{ "id": "4", "text": "Meat" },
{ "id": "5", "text": "Sweets" },
{ "id": "6", "text": "Vegetables" },
{ "id": "7", "text": "Water" }
]
var $bar = $('#accordion').accordion({
expandDirection: "right",
headerContentOrientation: 'vertical',
showExpandBox: false,
// Map group data fields with fields from local data source
dataFields: {
id : 'id',
text : 'text',
dataSource : localData }
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.accordion.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.accordion.min.js"></script>
</head>
<body>
<div id="accordion" class="widget"></div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}
A sample which demonstrates how to use local data to load the content in Accordion.