TabPanel에 내장된 패널
TabPanel은 선택된 탭의 내용을 표시하는 내장된 패널을 가지고 있습니다. 그러나 다른 요소에 내용을 표시하려면 내장된 콘텐츠 요소를 숨기고 selectedIndexChanged 이벤트를 사용하여 내용을 업데이트할 수 있습니다.
HTML
<div id="theTabPanel">
<div>
<a>Africa</a>
<div></div> <!-- no content -->
</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>
</div>
<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>Javascript
import * as wjNav from '@mescius/wijmo.nav';
function init() {
var theTabPanel = new wjNav.TabPanel('#theTabPanel', {
// show the content for the selected tab in a separate div
selectedIndexChanged: function (s, e) {
var div = document.getElementById('detachedContent');
div.innerHTML = 'Content for tab <b>' +
s.selectedTab.header.textContent +
'</b>...';
}
});
// hide the built-in content area
theTabPanel.hostElement.querySelector('.wj-tabpanes').style.display = 'none';
}