Créer une arborescence de fichiers avec jQuery

L'explorateur de fichiers jQuery est un plugin AJAX, configurable pour jQuery. Vous pouvez créer une arborescence personnalisée de fichiers, entièrement interactive avec une simple ligne de code JavaScript.

Actuellement, côté serveur, les scripts de connexion sont disponibles pour PHP, ASP, ASP.NET, JSP et Lasso. Si vous êtes développeur, vous pouvez facilement créer votre propre script de connexion pour travailler avec le langage de votre choix.

• Produit du XHTML valide et sémantique.
• Entièrement personnalisable via CSS.
• Possibilité de changer l'icône basée sur l'extension de fichier.
• Utilisation d'AJAX pour aller chercher des informations sur les fichiers à la volée.
• Facile à configurer et à mettre en œuvre.
• Contient les scripts de connexion pour PHP, ASP, ASP.NET (C#), JSP et Lasso.
• Possibilité de prise en charge de scripts de connexion personnalisés.
• Personnalisation possible des événements «Développer/Réduire».
• Personnalisation possible de la vitesse des événements «Développer/Réduire».
• Prise en charge des fonctionnalités jQuery 'easings' (effets de jQuery).
• Vue multidossier ou dossier unique .
• Message de chargement personnalisable.

L'explorateur de fichiers jQuery fonctionne sur tous les navigateurs supportés par jQuery. Il a été entièrement testé sur :

• Internet Explorer 6 & 7 ;
• Firefox 2 & 3 ;
• Safari 3 ;
• Chrome (bêta) ;
• Opera 9.

Voir une démonstration de l'explorateur de fichiers avec diverses options.

Version actuelle : Version 1.01 (12 avril 2008)

Ce plugin vous est fourni en l'état, sans aucune contrepartie. Si vous souhaitez soutenir son développement, n'hésitez pas à contribuer pour un montant de votre choix via PayPal. Comme toujours, nous vous invitons à contribuer au code pour la correction de bugs et améliorations de fonctionnalités. Quoi qu'il en soit, merci de soutenir nos efforts !

VI-A. Dépendances▲

VI-B. Création d'une arborescence de fichiers▲

$(document).ready( function() 
{
    $('#container_id').fileTree({ root: '/some/folder/' }, function(file) { 
        alert(file);
    });
});

VI-C. Configuration de l'explorateur de fichiers▲

$(document).ready( function() {
    $('#container_id').fileTree({
        root: '/some/folder/',
        script: 'jqueryFileTree.asp',
        expandSpeed: 1000,
        collapseSpeed: 1000,
        multiFolder: false
        }, function(file) { 
            alert(file);
        });
    });

VI-D. Styliser l'arborescence des fichiers▲

VI-E. Gérer la réponse▲

function openFile(file) {
    // do something with file
}
 
$(document).ready( function() {
    $('#container_id').fileTree({ [options] }, function(file) { 
        openFile(file);
    }); 
});

L'explorateur de fichiers jQuery est livré avec quelques scripts de connexion cote serveur qui sont utilisés pour lire le système de fichiers sur votre serveur de données et retourne les données au script coté client via AJAX. Le script de connexion par défaut est jqueryFileTree.php. Vous pouvez utiliser un script de connexion pour un autre langage par la mise en paramètre du script à l'endroit où vous voulez utiliser le script (voir Configuration de l'explorateur de fichiers). Sinon, vous pouvez coder un script de connexion personnalisé pour étendre les fonctionnalités de l'explorateur de fichiers jQuery afin de mieux répondre à vos besoins.

Les scripts pour les langages suivants sont inclus dans le téléchargement :

• PHP par Cory SN LaViska ;
• ASP (VBS) par Chazzuka ;
• ASP.NET (C#) par Andrew Sweeny ;
• ColdFusion par Tjarko Rikkerink ;
• JSP par Joshua Gould ;
• Lasso par Marc Sabourdin ;
• Lasso par Jason Huck ;
• Python / Django par Martin Skou ;
• Ruby par Erik Lax.

Si vous souhaitez partager un script de connexion que vous avez écrit pour un autre langage, faites-le-nous savoir ! Nous nous ferons un plaisir de l'ajouter à la page de téléchargement pour que tout le monde puisse l'utiliser !

Les scripts fournis avec l'explorateur de fichiers jQuery sont uniquement conçus pour lire des informations auprès d'un dossier racine. Bien que ce soit généralement inoffensif, il existe un potentiel pour des personnes malveillantes de voir l'intégralité de votre structure de répertoire par usurpation des paramètres de la racine. Il est fortement recommandé d'ajouter une certaine forme de contrôle à votre script de connexion pour vérifier que le chemin d'accès lu est un chemin d'accès que vous souhaitez permettre aux visiteurs de voir.

Vous pouvez créer un script de connexion pour étendre les fonctionnalités de l'explorateur de fichiers. La méthode la plus simple pour le faire est probablement de modifier l'un des scripts fournis dans le téléchargement. Si vous voulez démarrer à partir de zéro, votre script doit accepter une variable POST(dir) et renvoyer une liste non ordonnée dans le format suivant :

<ul class="jqueryFileTree" style="display: none;">
    <li class="directory collapsed"><a href="#" rel="/this/folder/">Folder Name</a></li>
    (additional folders here)
    <li class="file ext_txt"><a href="#" rel="/this/folder/filename.txt">filename.txt</a></li>
    (additional files here)
</ul>

Notez que l'extension de fichier correspondante doit être écrite comme une classe de l'élément li, avec le préfixe ext_. (Le préfixe est utilisé pour prévenir les noms de classes non valides pour les extensions de fichier qui commencent avec des caractères non alpha.)

1.01 Mise à jour pour travailler avec des caractères étrangers dans le répertoire / noms de fichiers (12 avril 2008).

1.00 Version initiale (24 mars 2008).

L'explorateur de fichiers jQuery est mis à disposition sous un contrat Creative Commons et les droits d'auteur © 2008 par Cory SN LaViska.

Un remerciement spécial à FAMFAMFAM pour leur excellent jeu d'icônes.

Tous mes remerciements à RideKick et Bovino pour leur relecture.