jQuery Split.js para dividir contenidos html ó textos

DESCARGA : Splitjs

jQuery Split.js para dividir contenidos html ó textos, Split.js es una utilidad ligera para crear vistas de división ajustables o paneles, la funcionalidad de este plugin viene  de la necesidad de mostrar contenido separado.

El contenido se puede separa en diferentes formas, como por ejemplo:

1.- División horizontal  (2 o más columnas)

2.- División vertical (2 o más  columnas)

3.- Subdivisiones (2 horizontales y una de la horizontal a la mitad)

Lo interesante de este plugin es que además de la división que se puede realizar, puede adaptar el contenido partido si es movido en el div el texto contenido se adaptara al tamaño puesto.

En el siguiente enlace puedes ver el ejemplo funcional:

http://nathancahill.github.io/Split.js/

Para su implementación se necesitan elementos con referencia (id o class) para poder crear el efecto con el plugin.

Vamos a seguir estos pasos:

1.- Crear los enlaces:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<script src="http://nathancahill.github.io/Split.js/split.js"></script>

2.- Crear los contenidos que serán divididos, como por ejemplo lo siguiente.

 <div id="a" class="split split-horizontal">
 <div id="c" class="split content"></div>
 <div id="d" class="split content"></div>
 </div>
 <div id="b" class="split split-horizontal">
 <div id="e" class="split content"></div>
 <div id="f" class="split content"></div>
 </div>

3.- Crear la relación hacia los elementos

 Split(['#a', '#b'], {
 gutterSize: 8,
 cursor: 'col-resize'
 })

 Split(['#c', '#d'], {
 direction: 'vertical',
 sizes: [25, 75],
 gutterSize: 8,
 cursor: 'row-resize'
 })

 Split(['#e', '#f'], {
 direction: 'vertical',
 sizes: [25, 75],
 gutterSize: 8,
 cursor: 'row-resize'
 })

Puedes descargar este plugin y comentarnos en donde lo utilizaste.

You may also like...