Botón de alternancia dinámico en línea en Vanilla JavaScript-ButtonStrip. js

Vista prévia

Descripción

ButtonStrip. js es un plugin de JavaScript vainilla que genera dinámicamente un botón de alternancia en línea para desencadenar acciones al hacer clic en el botón izquierdo o derecho.

Funcionamiento

Cree un contenedor para mantener presionado el botón de alternancia.

<div id="content"></div>

Importe el ButtonStrip. js en el documento.

<script src="buttonstrip.min.js"></script>

Cree una nueva instancia de ButtonStrip.

var instance = new ButtonStrip({


id: 'buttonStrip-demo'
});

Añadir botones de la siguiente manera:

• pName: el nombre del botón
• pActive: está activo
• pType: desencadena el evento
• pCallback: función de devolución de llamada

instance.addButton('jQuery', true, 'click', function(){

console.log('jQueryScript.net');
});
instance.addButton('JavaScript', false, 'click', function(){

console.log('WIKICSS.COM');
});

Anexar los botones al elemento contenedor.

instance.append('#content');

El ejemplo CSS para el estilo del botón de alternancia.

.button-strip {

position: absolute;

top: 100px;

left: 100px;

width: 340px;

height: 55px;

border: 2px solid #1496BD;

border-radius: 3px;

display: flex;
}

.strip-button {

background-color: white;

color: #1496BD;

width: 50%;

height: 100%;

text-align: center;

vertical-align: middle;

line-height: 65px;

transition: background-color .4s linear, color .2s linear;

cursor: pointer;
}

.strip-button span {

color: inherit;
}

.strip-button-text {

font-size: 22px;

color: #1496BD;

margin: 0px;

padding: 0px;
}

.active-strip-button {

background-color: #1496BD;

color: white;
}