Your search did not match any results.
Multi View


API Reference
The dxMultiView 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 between the views by sliding them to the right and to the left.
Copy to Codepen
$(function(){ DevExpress.ui.setTemplateEngine("underscore"); var multiView = $("#multiview-container").dxMultiView({ height: 300, dataSource: multiViewItems, selectedIndex: 0, loop: false, animationEnabled: true, itemTemplate: $("#customer"), onSelectionChanged: function(e) { $(".selected-index") .text(e.component.option("selectedIndex") + 1); } }).dxMultiView("instance"); $("#loop-enabled").dxCheckBox({ value: false, text: "Loop enabled", onValueChanged: function(e) { multiView.option("loop", e.value); } }); $("#animation-enabled").dxCheckBox({ value: true, text: "Animation enabled", onValueChanged: function(e) { multiView.option("animationEnabled", e.value); } }); $(".item-count").text(multiViewItems.length); });
<!DOCTYPE html> <html xmlns=""> <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> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="dx-theme" data-theme="generic.light" href="" /> <link rel="dx-theme" data-theme="android5.light" href="" /> <link rel="dx-theme" data-theme="ios7.default" href="" /> <link rel="dx-theme" data-theme="" href="" /> <link rel="dx-theme" data-theme="win10.white" href="" /> <script src=""></script> <script src="js/underscore-1.5.1.min.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 class="selected-index">1</span> of <span class="item-count"></span> </div> <div id="multiview-container"></div> <div class="options"> <div class="options-header">Options:</div> <div> <div id="loop-enabled"></div> </div> <div> <div id="animation-enabled"></div> </div> </div> </div> <script type="text/html" id="customer"> <div class="multiview-item"> <h1><%= CompanyName%></h1> <div> <p> <b><%= City%></b> (<span><%= State%></span>) </p> <p> <span><%= Zipcode%></span> <span><%= Address%></span> </p> </div> <div> <p> Phone: <b><%= Phone%></b> </p> <p> Fax: <b><%= Fax%></b> </p> <p> Website: <a href="<%= Website%>" target="_blank"> <%= Website%> </a> </p> </div> </div> </script> </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": "" }, { "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": "" }, { "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": "" }, { "ID": 4, "CompanyName": "Tom Club", "Address": "999 Lake Drive", "City": "Issaquah", "State": "Washington", "Zipcode": 98027, "Phone": "(800) 955-2292", "Fax": "(800) 955-2293", "Website": "" }];