Comment écrire une arborescence de fichiers jquery-Questions et réponses frontales-php.cn

Comment écrire une arborescence de fichiers jquery

PHPz

Libérer： 2023-05-28 11:34:07

original

580 Les gens l'ont consulté

Avec le développement d'applications Web, nous avons souvent besoin d'afficher certaines structures organisationnelles visuelles dans l'application, et la structure des fichiers en fait partie. L'arborescence de fichiers jQuery est un moyen très efficace d'afficher la structure hiérarchique des fichiers et des dossiers.

Ensuite, nous vous présenterons comment utiliser jQuery pour créer une arborescence de fichiers.

Importer la bibliothèque jQuery

Tout d'abord, vous devez importer le fichier de la bibliothèque jQuery. Ajoutez le code suivant dans la balise head de la page :

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

Copier après la connexion

Créer un schéma HTML

Ensuite, nous devons créer un schéma HTML pour afficher l'arborescence des fichiers. Nous allons créer un simple conteneur div pour afficher la hiérarchie de l'arborescence des fichiers.

<div class="file-tree">
    <ul>
        <li><a href="#">Folder 1</a>
            <ul>
                <li><a href="#">Subfolder 1</a></li>
                <li><a href="#">Subfolder 2</a></li>
            </ul>
        </li>
        <li><a href="#">Folder 2</a></li>
        <li><a href="#">Folder 3</a>
            <ul>
                <li><a href="#">Subfolder 1</a></li>
            </ul>
        </li>
    </ul>
</div>

Copier après la connexion

Écrire du code JavaScript

Ensuite, nous écrirons du code jQuery pour convertir la structure HTML en une arborescence de fichiers. Nous utiliserons la méthode "each()" de jQuery pour parcourir la structure HTML afin de la convertir en une arborescence de fichiers.

$(document).ready(function () {
    $(".file-tree ul").hide();
    $(".file-tree li").each(function () {
        if ($(this).children("ul").length > 0) {
            $(this).addClass("parent");
        }
    });
    $(".file-tree a").click(function () {
        var children = $(this).parent("li.parent").children("ul");
        if (children.is(":visible")) {
            children.hide();
        } else {
            children.show();
        }
    });
});

Copier après la connexion

Dans ce code, nous parcourons chaque élément "li" et vérifions s'il y a un élément "ul" dans ses éléments enfants. Si tel est le cas, nous le marquons comme dossier parent. Nous masquons ensuite tous les sous-répertoires du dossier (en appelant la méthode "hide()") et attachons un gestionnaire d'événements de clic pour les afficher (en appelant la méthode "show()").

Style Design

Enfin, nous avons besoin de quelques styles CSS pour rendre la structure de l'arborescence des fichiers plus nette et plus agréable.

.file-tree ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.file-tree ul {
    margin-left: 1em;
    position: relative;
}
.file-tree li.parent > a:before {
    content: "+ ";
}
.file-tree ul ul:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.5em;
    border-left: 1px solid #ccc;
}

Copier après la connexion

Ce code CSS transforme la structure arborescente des fichiers en une conception visuelle plus lisible. Il définit les marges et le remplissage de toutes les listes non ordonnées et des éléments de liste à zéro, et définit tous les éléments des éléments de liste comme non marqués. De plus, il utilise le symbole « + » comme pseudo-élément CSS pour représenter le dossier parent, tout en utilisant une bordure pleine pour représenter les dossiers enfants.

Résumé

En utilisant jQuery pour créer une arborescence de fichiers, vous pouvez facilement afficher des hiérarchies complexes et personnaliser leur apparence et leur comportement à l'aide de styles CSS. À mesure que votre maîtrise de JavaScript et de jQuery augmente, vous pouvez également créer des arborescences de fichiers plus complexes pour répondre à vos besoins spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!