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 function addPane() {42 var pane = document.createElement("div");43 pane.className = "pane";44 pane.innerHTML = `45 <div class="tab-container">46 <!-- Pestañas aquí -->47 </div>48 <div class="tab-content">49 <!-- Contenido de la pestaña aquí -->50 </div>`;51 document.getElementById("workspace").appendChild(pane);52 }53 54 function addTab(paneId, serviceName) {55 var tabContainer = document.querySelector('#' + paneId + ' .tab-container');56 var tab = document.createElement("div");57 tab.className = "tab";58 tab.textContent = serviceName;59 tabContainer.appendChild(tab);60 }61 62 // Ejemplo de uso63 addPane(); // Agrega un nuevo panel64 addTab('pane1', 'Base de Datos'); // Agrega una pestaña al primer panel65 addTab('pane1', 'Logs'); // Agrega otra pestaña al mismo panel66 </script>67 </body>68 </html>69 Enlace
El enlace para compartir es: