Your search did not match any results.
Multi View

Overview

Documentation
The MultiView widget contains several views and allows an end user to switch between them. In this demo, all views are defined using a custom template. You can navigate through the views by swiping them in the horizontal direction.
Copy to Codepen
Apply
Reset
window.onload = function() { var viewModel = function(){ var that = this; that.selectedIndex = ko.observable(0); that.animationEnabled = ko.observable(true); that.loop = ko.observable(false); that.itemCount = multiViewItems.length; that.multiViewOptions = { height: 300, dataSource: multiViewItems, selectedIndex: that.selectedIndex, loop: that.loop, animationEnabled: that.animationEnabled, itemTemplate: "customer" }; }; ko.applyBindings(new viewModel(), document.getElementById("multiview")); };
<!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="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.6/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="multiview"> <div> Item <span data-bind="text: (selectedIndex() + 1)"></span> of <span data-bind="text: itemCount"></span> </div> <div data-bind="dxMultiView: multiViewOptions"> <div data-options="dxTemplate : { name: 'customer' } "> <div class="multiview-item"> <h1 data-bind="text: $data.CompanyName"></h1> <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="options"> <div class="options-header">Options:</div> <div> <div data-bind="dxCheckBox: { value: loop, text: 'Loop enabled' }"></div> </div> <div> <div data-bind="dxCheckBox: { value: animationEnabled, text: 'Animation enabled' }"></div> </div> </div> </div> </div> </body> </html>
#multiview { margin-top: 25px; } .multiview-item{ margin:25px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; padding: 20px 0 30px; } .multiview-item > div{ padding-top: 20px; } .options, #multiview > div:first-child { padding-left: 25px; } #multiview p { margin: 0; } #multiview h1 { font-size: 34px; } .options .dx-checkbox { margin-bottom: 5px; }
var multiViewItems = [{ "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" }];