1.0.2 • Published 6 years ago
interwave-elements v1.0.2
Zipper
Opciones de configuracion
| Option | Tipo | Descripción |
|---|---|---|
| primaryContainer | string | Selector jQuery que determina cual va a ser el elemento que contiene los elementos principales a intercalar |
| secondaryContainer | string | Selector jQuery que determina cual va a ser el elemento que contiene los elementos secundarios a intercalar para poder retornarlos cuando se requiera |
| itemsNum | number | Entero positivo mayor que 0, indica el numero de elementos seguidos del contenedor primario |
| onZipper * | function | Callbalck function que se ejecuta cuando se intercalan los elementos |
| onUnZipper * | function | Callback function que se ejecuta cuando los elementos del contenedor secundario regresan a su pocision original |
| elementToMove | string | Selector jQuery que determina los elementos contenidos en secondaryContainer que se desea mover |
| moveClass | string | nombre de la clase de referencia que se agrega a elemntToMove |
onZipper onUnZipper * son funciones opcionales
Inicialización
var zipper = new Zipper(options);
zipper.init();
Ejemplo de uso
Suponga que se desea intercalar los elementos de las clases generlContent y sideRightContent
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-8" general>
<div>
<p>Parrafo</p>
</div>
<div>
<p>Parrafo</p>
</div>
<div>
<p>Parrafo</p>
</div>
</div>
<div class="col-lg-4 sideRightContent">
<div class="sideRight">
<p>Texto</p>
</div>
<div class="sideRight">
<p>Texto</p>
</div>
<div class="sideRight">
<p>Texto</p>
</div>
</div>
</div>
</div>var prueba = new Zipper({
itemsNum: 2,
moveClass: 'move',
primaryContainer: '[general]',
secondaryContainer: '.sideRightContent',
elementToMove: '.sideRight',
// callback cuando los elementos regresen a su lugar
onUnZipper: function () { },
// callback cuando los elementos se intercalen
onZipper: function () { }
})
prueba.init();