This is a migrated thread and some comments may be shown as answers.

sharing div space with tabstrip

7 Answers 364 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 21 Mar 2016, 01:03 PM

sharing-div-space-with-tabstrip.zip

Iliana,

Thanks for helping.

Please run the attached snippet. Then click on a tab. The [blue] area to the right is where I would like to put some readonly text.

In case the zip file does not open, I have included the snippet below.

Rick

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Sharing div space with tabstrip</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"/>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"/>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.silver.min.css"/>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>

</head>

<body>

<div id="splitter">

<div>Pane A</div>

<div style="background-color:lightblue;">

<div id="tabstrip" style="width:50%;height:100%;">

<ul>

<li>Tab 1</li>

<li>Tab 2</li>

</ul>

<div>Content 1<br><br><br><br></div>

<div>Content 2<br><br><br><br></div>

</div>

<script>

$("#splitter").kendoSplitter({ orientation: "vertical",

panes: [ {}, { } ]

});

$("#tabstrip").kendoTabStrip({

animation: {

// fade-out current tab over 1000 milliseconds

close: {

duration: 1000,

effects: "fadeOut"

},

// fade-in new tab over 500 milliseconds

open: {

duration: 500,

effects: "fadeIn"

}

});

</script>

</body>

</html>