The source code for the Vue version of this demo will be available soon.
$(function(){
function showMenu() {
slideOut.option("menuVisible", !slideOut.option("menuVisible"));
}
var slideOut = $("#slideout").dxSlideOut({
dataSource: products,
onItemClick: showMenu,
menuVisible: true,
swipeEnabled: true,
menuGrouped: true,
itemTemplate: function(itemData, itemIndex, itemElement) {
$("<div/>")
.appendTo(itemElement)
.dxToolbar({
dataSource: [{
location: "before",
widget: "dxButton",
options: {
icon: "menu",
onClick: showMenu
}
}, {
location: "center",
template: function(e) {
return "<p>" + itemData.text + "</p>";
}
}]
});
var $infoContainer = $("<div />").attr("id", "info");
$infoContainer.append(
$("<img />").attr("src", itemData.src),
$("<h1 />").text(itemData.price)
);
var $fieldSetContainer = $("<div />").addClass("dx-fieldset");
$fieldSetContainer.append(
$("<div />").addClass("dx-fieldset-header").text("Options"),
$("<div />").addClass("dx-field").append(
$("<div />").addClass("dx-field-label").text("Swipe to reveal the menu"),
$("<div />").addClass("dx-field-value switch")
)
);
itemElement.append($infoContainer, $fieldSetContainer);
$(".switch").dxSwitch({
value: slideOut ? slideOut.option("swipeEnabled") : true,
onValueChanged: function(e) {
slideOut.option("swipeEnabled", e.value);
}
});
},
menuGroupTemplate: function(e) {
return "<b>" + e.key + "</b>";
}
}).dxSlideOut("instance");
});
<!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.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/19.2.4/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 class="slideout-container">
<div id="slideout"></div>
</div>
</div>
</body>
</html>
p {
margin: 0;
}
#info {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
margin-top: 10px;
}
#info img {
width: 100%;
}
.slideout-container {
height: auto;
position: absolute;
top: 0;
bottom: 0;
width:100%;
}
.dx-field-label {
width: 70%;
}
var products = [{
key: "Televisions",
items: [
{ text: "SuperLCD 42", price: "$1200", src: "../../../../images/products/7.png" },
{ text: "SuperLED 42", price: "$1450", src: "../../../../images/products/5.png" },
{ text: "SuperLED 50", price: "$1600", src: "../../../../images/products/4.png" },
{ text: "SuperLCD 55", price: "$1350", src: "../../../../images/products/6.png" },
{ text: "SuperLCD 70", price: "$4000", src: "../../../../images/products/9.png" }
]
},
{
key: "Monitors",
items: [
{ text: "DesktopLCD 19", price: "$160", src: "../../../../images/products/10.png" },
{ text: "DesktopLCD 21", price: "$170", src: "../../../../images/products/12.png" },
{ text: "DesktopLED 21", price: "$180", src: "../../../../images/products/13.png" }
]
},
{
key: "Projectors",
items: [
{ text: "Projector Plus", price: "$550", src: "../../../../images/products/14.png" },
{ text: "Projector PlusHD", price: "$750", src: "../../../../images/products/15.png" }
]
},
{
key: "Video Players",
items: [
{ text: "HD Video Player", price: "$220", src: "../../../../images/products/1.png" },
{ text: "SuperHD Video Player", price: "$270", src: "../../../../images/products/2.png" }
]
}
];