Árbol de carpetas contraíbles con JavaScript puro-jslists

Vista prévia

Descripción

jslists es un complemento de JavaScript independiente que convierte las listas HTML anidadas en una lista de árbol plegable, de varios niveles .

Funcionamiento

jslists es un complemento de JavaScript independiente que convierte las listas HTML anidadas en una lista de árbol plegable, de varios niveles .

<ul id="simple_list">

<li>


<i class="fa fa-folder-o" aria-hidden="true"></i>


<b>Folder One</b>


<ul>



<li id="aa1"><i class="fa fa-file-text-o" aria-hidden="true"></i> Click Me</li>



<a href="https://www.google.com"><li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Two</li></a>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Three</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Four</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Five</li>


</ul>

</li>

<li>


<i class="fa fa-folder-o" aria-hidden="true"></i>


<b><a href="#">Folder Two</a></b>


<ul>



<li><i class="fa fa-folder-o" aria-hidden="true"></i> Item One




<ul>





<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>





<li><i class="fa fa-file-text-o" aria-hidden="true"></i> B</li>





<li><i class="fa fa-file-text-o" aria-hidden="true"></i> C</li>




</ul>



</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Two</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Three</li>



<li>




<i class="fa fa-folder-o" aria-hidden="true"></i> Item Four












<ul>





<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>





<li><i class="fa fa-file-text-o" aria-hidden="true"></i> B</li>





<li><i class="fa fa-folder-o" aria-hidden="true"></i> C






<ul>







<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>







<li><i class="fa fa-folder-o" aria-hidden="true"></i> B








<ul>









<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>









<li><i class="fa fa-file-text-o" aria-hidden="true"></i> B</li>









<li><i class="fa fa-folder-o" aria-hidden="true"></i> C










<ul>











<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>











<li><i class="fa fa-file-text-o" aria-hidden="true"></i> B</li>











<li><i class="fa fa-file-text-o" aria-hidden="true"></i> C</li>










</ul>









</li>








</ul>







</li>







<li><i class="fa fa-file-text-o" aria-hidden="true"></i> C</li>






</ul>





</li>




</ul>



</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Five</li>


</ul>

</li>

<li>


<i class="fa fa-folder-o" aria-hidden="true"></i>


<b>Folder Three</b>


<ul>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item One</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Two</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Three</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Four</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Five</li>


</ul>

</li>

<li>


<i class="fa fa-folder-o" aria-hidden="true"></i>


<b>Folder Four</b>


<ul>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item One</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Two</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Three</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Four</li>



<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Five</li>


</ul>

</li>

<li>


<i class="fa fa-folder-o" aria-hidden="true"></i>


<b>Folder Five</b>


<ul>



<li>Item One</li>



<li>Item Two</li>



<li>Item Three</li>



<li>Item Four</li>



<li>Item Five</li>


</ul>

</li>
</ul>

jslists es un complemento de JavaScript independiente que convierte las listas HTML anidadas en una lista de árbol plegable, de varios niveles .

<link rel="stylesheet" href="font-awesome.min.css">

Coloque el JavaScript de los jslists en la parte inferior de la Página Web.

<script src="jsLists.min.js"></script>

Inicializar la lista de árboles.

JSLists.applyToList('simple_list', 'ALL');

Registro de cambios

10/21/2018

• Actualización para incluir el punto de viñeta