The TabPanel has a built-in panel that shows the content of the selected tab. However, in some cases, you may want to display the content in a different element. To implement this, simply hide the built-in content element and use the SelectedIndex property to update the content.
The following GIF image shows how TabPanel appears with detached panels.
The following code example demonstrates how to display tab content in a different html element.
| Index.cshtml |
Copy Code
|
|---|---|
<script>
c1.documentReady(function () {
var tabDetached = wijmo.Control.getControl('#tabDetached');
// hide the built-in content area
tabDetached.hostElement.querySelector('.wj-tabpanes').style.display = 'none';
tabDetached_selectedIndexChanged(tabDetached);
});
function tabDetached_selectedIndexChanged(s, e) {
var div = document.getElementById('detachedContent');
div.innerHTML = 'Content for tab <b>' +
s.selectedTab.header.textContent +
'</b>...';
}
</script>
<c1-tab-panel id="tabDetached" selected-index-changed="tabDetached_selectedIndexChanged">
<!-- tab without any content -->
<div>
<a>Africa</a>
<div></div>
</div>
<div>
<a>America</a>
<div></div>
</div>
<div>
<a>Asia</a>
<div></div>
</div>
<div>
<a>Europe</a>
<div></div>
</div>
<div>
<a>Oceania</a>
<div></div>
</div>
</c1-tab-panel>
<p></p>
<div class="panel panel-success">
<!-- separate div to show the content -->
<div class="panel-heading">
<h3 id="detachedContent" class="panel-title"></h3>
</div>
</div>
|
|
