Crear un organigrama con jQuery y OrgChart

Crear un organigrama con jQuery y OrgChart, si quieres crear un organigrama web de forma rápida sin tantas complicaciones puedes utilizar una lista <ul> en html y luego convertirla en un organigrama simple, sencillo y fácil.

1.- Lo primero que tienes que hacer es ver los ejemplos para saber si es lo que buscabas, aquí puedes ver esos ejemplos: https://github.com/dabeng/OrgChart

2.- Luego de eso tienes que crear la estructura que deseas convertir, esto lo haces utilizando etiquetas con jerarquía, en este caso vamos a usar las etiquetas html llamadas <ul>, si tienes dudas de como usar estas etiquetas puedes visitar el siguiente sitio: http://www.w3schools.com/tags/tag_ul.asp en donde te encontraras con ejemplos y explicaciones de esta etiqueta.

3.- Para empezar a usar este plugin tienes que hacer lo siguiente:

a).- Incluir archivos necesarios js y css

<link href="css/jquery.orgchart.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="js/jquery.orgchart.js"></script>

b).- Crear la estructura html

<ul id="CaballerosZodiaco" style="display:none">
 <li>Atenea
 <ul>
 <li>Dohko de Libra
 <ul>
 <li>Shiryu</li>
 </ul>
 </li>
 <li>Camus de Acuario
 <ul>
 <li>Crystal Saint
 <ul>
 <li>Hyoga de Cisne</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Mu de aries
 <ul>
 <li>Kiki</li>
 </ul>
 
 </li>
 </ul>
 
 </li>
 </ul>
<!-- en la siguiente etiqueta saldrá el resultado: -->
 <div id="Organigrama-resultante">
 
 </div>

c).- Crear la referencia a los elementos <ul> creados.

<script>
$('#Organigrama-resultante').orgchart({
'data': $('#CaballerosZodiaco')
});
</script>

Puedes mirar el siguiente vídeo para la implemetación

The post Crear un organigrama con jQuery y OrgChart appeared first on Develoteca.