ZBLOG

else if ('0BJECTS' == init.type) { let self = new Fieldset(init.uselang ? lang(init.title) : init.title); let me = this; var vlParent = new VLayout().setVerticalAlign('top'); self.setBody(vlParent); if (!document.getElementById('outerBox...

要将 outerBox 加入到 self.setBody 中,而不影响上面的 vlParent,你可以考虑将它们一起包装在一个容器中,然后将这个容器设置为 self 的 body。

下面是修改后的代码示例,使用一个新的 div 作为外部容器,将 vlParentouterBox 一起添加到其中:

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 来包含 vlParentouterBox。然后我们将这个新的 outerContainer 设置为 self 的 body,这样就能保持原有的布局结构,同时将所需的元素加入进去。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22313

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?