BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

jQuery Organisation Chart, crea organigramas en html con jQuery

02/FEB/2012 26.947 visitas Ver comentarios
jQuery Organisation Chart, crea organigramas en html con jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

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...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018