Diseño básico de Split en Vanilla JavaScript-SplitterBar
| Autor: | ashduckett |
|---|---|
| Views Total: | 481 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 27, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Un plugin de diseño dividido con capacidad de respuesta en JavaScript Vanilla que permite ajustar el ancho de los paneles divididos arrastrando la barra divisora.
Funcionamiento
Enlace a la hoja de estilos y JavaScript de SplitterBar.
<link href="SplitterBar.css" rel="stylesheet"> <script src="splitterbar.js"></script>
Cree un contenedor para el diseño dividido.
<div id="container"> </div>
Divida el recipiente en 2 paneles divididos.
const div1 = document.createElement('div');
div1.style.backgroundColor = 'yellow';
const div2 = document.createElement('div');
div2.style.backgroundColor = 'green';
const div1Content = document.createElement('div');
div1Content.innerHTML = 'Left side';
div1Content.classList.add('div-1-content')
div1.appendChild(div1Content);
const div2Content = document.createElement('div');
div2Content.innerHTML = 'Right side';
div2Content.classList.add('div-2-content')
div2.appendChild(div2Content);
const splitterBar = new SplitterBar(document.getElementById('container'), div1, div2); Registro de cambios
03/27/2019
- Actualización de JS
