Use Windows as Sliding Panes
Environment
| Product | Progress® Kendo UI® Window for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I configure the Kendo UI for jQuery Window so it acquires the visual effect of a sliding UI component?
Solution
The following example demonstrates how to make the Window behave as a sliding pane.
<div id="dialog">
<p>Some content</p>
</div>
<a href="#" id="openWindow">Open</a>
<script>
$("#openWindow").kendoButton();
$("#dialog").kendoWindow({
title: "Title",
width: "60%",
height: "94%",
actions: [ "close" ],
draggable: false,
resizable: false,
modal: true,
position:{
top: 0,
left: "40%"
},
animation: {
open: {
effects: "slideIn:left",
duration: 500
},
close: {
effects: "slideIn:left",
reverse: true,
duration: 500
},
},
visible: false
});
$("#openWindow").click(function(){
var dialog = $("#dialog").getKendoWindow();
dialog.open();
})
</script>