window.onload = function () {
const ViewModel = function () {
const that = this;
that.selectedIndex = ko.observable(0);
that.animationEnabled = ko.observable(true);
that.swipeEnabled = ko.observable(true);
that.loop = ko.observable(false);
that.itemCount = tabPanelItems.length;
that.tabPanelOptions = {
height: 260,
dataSource: tabPanelItems,
selectedIndex: that.selectedIndex,
loop: that.loop,
animationEnabled: that.animationEnabled,
swipeEnabled: that.swipeEnabled,
itemTitleTemplate: 'title',
itemTemplate: 'customer',
};
};
ko.applyBindings(new ViewModel(), document.getElementById('tabpanel'));
};
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.3/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="tabpanel">
<div data-bind="dxTabPanel: tabPanelOptions">
<div data-options="dxTemplate : { name: 'title' } ">
<span data-bind="text: $data.CompanyName"></span>
</div>
<div data-options="dxTemplate : { name: 'customer' } ">
<div class="tabpanel-item">
<div>
<p>
<b data-bind="text: $data.City"></b>
(<span data-bind="text: $data.State"></span>)
</p>
<p>
<span data-bind="text: $data.Zipcode"></span>
<span data-bind="text: $data.Address"></span>
</p>
</div>
<div>
<p>
Phone: <b data-bind="text: $data.Phone"></b>
</p>
<p>
Fax: <b data-bind="text: $data.Fax"></b>
</p>
<p>
Website:
<a data-bind="attr: { href: $data.Website },
text: $data.Website"
target="_blank">
</a>
</p>
</div>
</div>
</div>
</div>
<div class="item-box">
Item <span data-bind="text: (selectedIndex() + 1)"></span>
of <span data-bind="text: itemCount"></span>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div data-bind="dxCheckBox: {
value: loop,
text: 'Loop enabled'
}"></div>
</div>
<div class="option">
<div data-bind="dxCheckBox: {
value: animationEnabled,
text: 'Animation enabled'
}"></div>
</div>
<div class="option">
<div data-bind="dxCheckBox: {
value: swipeEnabled,
text: 'Swipe enabled'
}"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.tabpanel-item {
height: 200px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 25px;
padding-top: 55px;
}
.mobile .tabpanel-item {
padding-top: 10px;
}
.tabpanel-item > div {
float: left;
padding: 0 85px 10px 10px;
}
.tabpanel-item p {
font-size: 16px;
margin: 0;
}
.item-box {
font-size: 16px;
margin: 15px 0 45px 10px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
const tabPanelItems = [{
ID: 1,
CompanyName: 'SuprMart',
Address: '702 SW 8th Street',
City: 'Bentonville',
State: 'Arkansas',
Zipcode: 72716,
Phone: '(800) 555-2797',
Fax: '(800) 555-2171',
Website: 'http://www.nowebsitesupermart.com',
}, {
ID: 2,
CompanyName: "El'Depot",
Address: '2455 Paces Ferry Road NW',
City: 'Atlanta',
State: 'Georgia',
Zipcode: 30339,
Phone: '(800) 595-3232',
Fax: '(800) 595-3231',
Website: 'http://www.nowebsitedepot.com',
}, {
ID: 3,
CompanyName: 'K&S Music',
Address: '1000 Nicllet Mall',
City: 'Minneapolis',
State: 'Minnesota',
Zipcode: 55403,
Phone: '(612) 304-6073',
Fax: '(612) 304-6074',
Website: 'http://www.nowebsitemusic.com',
}, {
ID: 4,
CompanyName: 'Tom Club',
Address: '999 Lake Drive',
City: 'Issaquah',
State: 'Washington',
Zipcode: 98027,
Phone: '(800) 955-2292',
Fax: '(800) 955-2293',
Website: 'http://www.nowebsitetomsclub.com',
}];