Build jQuery Nestable from JSON source.

Example of how to build jQuery Nestable from JSON. Orignal plugin available at https://github.com/dbushell/Nestable

by eorozco

HTML

<script src="https://dl.dropboxusercontent.com/u/34573370/js/nestable/jquery.nestable.js"></script>
<strong>Build jQuery Nestable from UL list, no item classes, collapsed default</strong> Orginal plugin source code at https://github.com/dbushell/Nestable
<br /><br /><hr />


<div id="nestable">
<ul>
<li>Unidad 1. Introducción a Drupal</li>
<li>Unidad 2. Instalación de Drupal

<ul>
<li>Instalación de un gestor de máquinas virtuales</li>
<li>Instalación de la imagen</li>
</ul></li>
<li>Unidad 3. El área de administración

<ul>
<li>Panel de control</li>
<li>Contenido

<ul>
<li>Agregar contenido</li>
<li>Hallar contenido</li>
<li>Comentarios</li>
</ul></li>
<li>Estructura

<ul>
<li>Bloques</li>
<li>Disparadores</li>
<li>Menús</li>
<li>Taxonomía</li>
<li>Tipos de contenido</li>
</ul></li>
<li>Apariencia

<ul>
<li>Temas     </li>
</ul></li>
<li>Personas

<ul>
<li>Agregar y editar usuario</li>
<li>Roles y permisos</li>
</ul></li>
<li>Módulos

<ul>
<li>Módulos Core</li>
<li>Instalar módulos</li>
<li>Desinstalar módulos</li>
</ul></li>
<li>Configuración</li>
<li>Informes</li>
</ul></li>
<li>Unidad 4. Gestión de contenidos</li>
<li>Unidad 5. Tipos de contenido</li>
<li>Unidad 6. Gestión de menús</li>
<li>Unidad 7. Gestión de bloques</li>
<li>Unidad 8. Temas</li>
<li>Unidad 9. Ampliación de funcionalidades con módulos</li>
<li>Unidad 10. Gestión de usuarios, roles y permisos</li>
<li>Unidad 11. Taxonomía</li>
<li>Unidad 12. Formatos de texto y editores WYSIWYG</li>
<li>Unidad 13. Blogs</li>
<li>Unidad 14. Foros</li>
<li>Unidad 15. Documentos estructurados: Books</li>
<li>Unidad 16. Galerías multimedia</li>
<li>Unidad 17. Búsquedas</li>
<li>Unidad 18. Idiomas y traducción</li>
<li>Unidad 19. Estadísticas de acceso</li>
<li>Unidad 20. Gestión, mantenimiento y actualización del portal</li>
</ul>
</div>

JavaScript

$('#nestable').nestable({
    listNodeName    :  'ul',
    expandBtnHTML   : '<button data-action="expand" type="button">+</button>',
    collapseBtnHTML : '<button data-action="collapse" type="button">-</button>'    
});
$('#nestable').nestable('collapseAll');