Advanced User Interface Controls and Components
Specifies an object that map the fields names from data source to the ones used by the TabStrip.
| Variable | Type | Details |
|---|---|---|
| content (default: 'content') | String | Specifies the name of a property in your data source which represents a DOM element used as tab content panel |
| dataSource (default: null) | Array | Specifies an array of tab 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 tab header |
| icon (default: 'icon') | String | Specifies the name of a property in your data source which represents a DOM element used as tab icon |
| id (default: 'id') | String | Specifies the name of a property in your data source which represents an unique identifier for an tab |
| text (default: 'text') | String | Specifies the name of a property in your data source which represents an tab 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 TabStrip widget.
Supported in: v1.0.
In this example the TabStrip 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 TabStrip 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 $tab = $('#tabstrip').tabstrip({
tabStripPlacement: 'left',
// Map tab 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.tabstrip.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.tabstrip.min.js"></script>
</head>
<body>
<div id="tabstrip" class="widget"></div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}
A sample which demonstrates how to use local data to load the content in TabStrip.