LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


dataFields

Specifies an object that map the fields names from data source to the ones used by the Accordion.

Parameters

VariableTypeDetails
content (default: 'content')StringSpecifies the name of a property in your data source which represents a DOM element used as group content panel
dataSource (default: null)ArraySpecifies an array of group objects used as data source
headerContent (default: 'content')StringSpecifies the name of a property in your data source which represents a DOM element used as group header
icon (default: 'icon')StringSpecifies the name of a property in your data source which represents a DOM element used as group icon
id (default: 'id')StringSpecifies the name of a property in your data source which represents an unique identifier for an group
text (default: 'text')StringSpecifies the name of a property in your data source which represents an group header title

Property Value

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.

Remarks

This property is accessed through 'dataFields' option of Accordion widget.

Version Information

Supported in: v1.0.

Example

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;

}

Samples

See Also