Sistema de Tabbing moderno en Vanilla JavaScript-tabby
| Autor: | janmarkuslanger |
|---|---|
| Views Total: | 629 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 19, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Tabby es un sistema de tabulación ultra ligero y bastante simple escrito en JavaScript puro de vainilla (ES6).
Viene con un montón de funciones de devolución de llamada que le permite hacer algunas cosas interesantes al cambiar entre pestañas.
Funcionamiento
Inserte la versión compilada de la biblioteca tabby en el documento.
<link rel="stylesheet" href="dist/tabby.css"> <script src="dist/tabby.js"></script>
Cree las fichas & contenido con pestañas utilizando los siguientes atributos de de datos :
- data-tabby-bar: unique name.
- data-tabby-content: must match the
data-tabby-barattribute. - data-tabby-active: active tab
<div class="tabs"> <div class="bar"> <div data-tabby-bar="1" data-tabby-active>Tab 1</div> <div data-tabby-bar="car">Tab 2</div> <div data-tabby-bar="3">Tab 3</div> </div> <div class="content"> <div data-tabby-content="1" data-tabby-active>Tab 1 Content</div> <div data-tabby-content="demo">Tab 2 Content</div> <div data-tabby-content="3">Tab 3 Content</div> </div> </div>
Inicialice el tabby.
const myTab = new Tabby.Component(document.querySelector('.tabs')); Aplicar estilos personalizados a las pestañas.
.tabs {
width: 100%;
max-width: 400px;
margin: 0 auto;
border-radius: .25rem;
overflow: hidden;
background-color: rgba(0, 0, 0, .1);
}
.tabs .bar {
width: 100%;
display: flex;
}
.tabs [data-tabby-bar]:first-child {
border-left: none;
}
.tabs [data-tabby-bar] {
padding: 1.25rem;
text-align: center;
cursor: pointer;
border-left: .0625rem solid rgba(0, 0, 0, .4);
flex: 1;
background-color: rgba(0, 0, 0, .3);
}
.tabs [data-tabby-content] {
padding: 1.25rem;
} Todas las funciones posibles de devolución de llamada.
const myTab = new Tabby.Component(document.querySelector('.tabs'),{
onConstruct: function(tab) {
// do something
},
onBeforeKilltabs: function(tab, activeBarElement, activeContentElement) {
// do something
},
onAfterKilltabs: function(tab, activeBarElement, activeContentElement) {
// do something
},
onBeforeShowtab: function(tab, activeBarElement, activeContentElement) {
// do something
},
onAfterShowtabs: function(tab, activeBarElement, activeContentElement) {
// do something
},
onBeforeInit: function(tab) {
// do something
},
onAfterInit: function(tab) {
// do something
}
}); Registro de cambios
01/19/2019
- v3.0.0 beta
