要将 outerBox
加入到 self.setBody
中,而不影响上面的 vlParent
,你可以考虑将它们一起包装在一个容器中,然后将这个容器设置为 self
的 body。
下面是修改后的代码示例,使用一个新的 div 作为外部容器,将 vlParent
和 outerBox
一起添加到其中:
else if ('0BJECTS' == init.type) {
let self = new Fieldset(init.uselang ? lang(init.title) : init.title);
let me = this;
// 创建一个新的外部容器
var outerContainer = document.createElement('div');
// 创建并设置 vlParent
var vlParent = new VLayout().setVerticalAlign('top');
// 将 vlParent 添加到 outerContainer
outerContainer.appendChild(vlParent);
if (!document.getElementById('outerBox')) {
const outerBox = document.createElement('div');
outerBox.id = 'outerBox';
Object.assign(outerBox.style, {
border: '2px solid #000',
padding: '19px',
borderRadius: '5px',
width: '300px'
});
const tabsContainer = document.createElement('div');
Object.assign(tabsContainer.style, {
display: 'flex',
marginBottom: '19px'
});
const tabs = [
{ name: '香蕉', content: '香蕉肉蓉' },
{ name: '可爱', content: '可爱肉蓉' }
];
const contentContainer = document.createElement('div');
Object.assign(contentContainer.style, {
border: '1px solid #000',
padding: '19px'
});
const switchTab = (tab, content) => {
tabsContainer.querySelectorAll('.tab').forEach(t => t.classList.remove('active-tab'));
tab.classList.add('active-tab');
contentContainer.textContent = content;
};
tabs.forEach(({ name, content }) => {
const tab = document.createElement('div');
tab.textContent = name;
tab.classList.add('tab');
tab.addEventListener('click', () => switchTab(tab, content));
tabsContainer.appendChild(tab);
});
switchTab(tabsContainer.querySelector('.tab'), tabs[0].content);
outerBox.appendChild(tabsContainer);
outerBox.appendChild(contentContainer);
// 将 outerBox 添加到外部容器中
outerContainer.appendChild(outerBox);
const style = document.createElement('style');
style.innerHTML = `
.tab {
padding: 10px;
cursor: pointer;
border: 1px solid #000;
margin-right: 5px;
color: #000;
background-color: #fff;
}
.active-tab {
background-color: #000;
color: #fff;
}
`;
document.head.appendChild(style);
}
// 最后,将整个外部容器设置为 self 的 body
self.setBody(outerContainer);
}
在这个修改后的代码中,我们创建了一个 outerContainer
来包含 vlParent
和 outerBox
。然后我们将这个新的 outerContainer
设置为 self
的 body,这样就能保持原有的布局结构,同时将所需的元素加入进去。
内容由零声教学AI助手提供,问题来源于学员提问