jQuery Organisation Chart, crea organigramas en html con jQuery Blog de Martin Iglesias

jQuery Organisation Chart, crea organigramas en html con jQuery

Escrito por Martín Iglesias y leído 3,741 veces. Ver comentarios

02FEBRERO/2012

Este plugin lo encuentro muy interesante, se trata, básicamente de crear diagramas organizativos sin necesidad de utilizar imágenes... los organigramas de toda la vida, esos que utilizan todas (o casi todas) las empresas.

Básicamente consiste es una lista desordenada del tipo UL muy trabajada, con sublistas para las diferentes cabeceras y, a su vez, más sublistas para los cargos inferiores...

Explicándome mejor, si quieremos un nivel JEFE -> GERENTE -> EMPLEADO, deberíamos crear una lista tal como se muestra en el código 1 más abajo... utilizar este plugin y dedicarnos a personalizar nuestra gráfica mediante CSS.

Aun no he tenido la necesidad de utilizarlo, sé de algunas webs antiguas que he realizado que llevaban de estas gráficas, tal vez algún día las actualice:)

Características principales:

Muy fácil de usar dado que toda la gráfica es una lista desordenada.
Mostrar / ocultar una rama del árbol haciendo clic en el nodo respectivo.
Los nodos pueden contener cualquier cantidad de HTML, excepto
y
- Fácil de personalizar mediante CSS.
Quiero descargarlo
Pues bien, no desesperes, te dejo una demo (la oficial) y el enlace para la descarga desde la web de su autor.

Código 1 - HTML

<ul>
<li>JEFE
<ul>
<li>GERENTE
   <ul>
   <li>EMPLEADO</li>
   </ul> <!-- empleado fin -->
</li>
</ul> <!-- gerente fin -->
</li>
</ul> <!-- jefe fin -->

Código 2 - JAVASCRIPT

jQuery(document).ready(function() {
        $("#org").jOrgChart({
			chartElement : '#chart',
			dragAndDrop  : true
		});
    });

Acerca del Autor:

Diseñador web freelance en Coruña Galicia | Martin Iglesias

Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.

Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

jQuery Organisation Chart, crea organigramas en html con jQuery

Acerca del Autor:

Artículos relacionados: