1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Plataforma Cloud</title>7 <style>8 /* Estilos básicos... */9 .workspace {10 display: flex;11 width: 100%;12 height: 80vh;13 }14 .pane {15 flex: 1;16 border: 1px solid #ddd;17 margin: 5px;18 }19 .tab-container {20 display: flex;21 background-color: #f1f1f1;22 border-bottom: 1px solid #ddd;23 }24 .tab {25 padding: 10px;26 margin-right: 5px;27 cursor: pointer;28 border: 1px solid #ccc;29 }30 .tab-content {31 padding: 10px;32 }33 </style>34 </head>35 <body>36 <div class="workspace" id="workspace">37 <!-- Paneles divisibles aquí -->38 </div>39 40 <script>41 let paneCount = 0;42 43 function addPane() {44 paneCount++;45 let paneId = 'pane' + paneCount;46 47 let pane = document.createElement("div");48 pane.className = "pane";49 pane.id = paneId;50 pane.innerHTML = `51 <div class="tab-container">52 <!-- Pestañas aquí -->53 </div>54 <div class="tab-content">55 <!-- Contenido de la pestaña aquí -->56 </div>`;57 document.getElementById("workspace").appendChild(pane);58 59 return paneId;60 }61 62 function addTab(paneId, serviceName) {63 let tabContainer = document.querySelector('#' + paneId + ' .tab-container');64 let tab = document.createElement("div");65 tab.className = "tab";66 tab.textContent = serviceName;67 tabContainer.appendChild(tab);68 }69 70 // Ejemplo de uso71 let paneId = addPane(); // Agrega un nuevo panel y obtiene su ID72 addTab(paneId, 'Base de Datos'); // Agrega una pestaña al panel creado73 addTab(paneId, 'Logs'); // Agrega otra pestaña al mismo panel74 </script>75 </body>76 </html>77 Enlace
El enlace para compartir es: