Créer une arborescence de fichiers avec jQuery

| Cory S.N. LaViska | Alban Lelasseux |

Cet article est la traduction de l'article : jQuery File Tree. Retrouvez toutes les traductions de disponibles sur https://abeautifulsite.developpez.com.

Un plugin AJAX d'exploration de fichiers pour jQuery. ♪

- Titre : Créer une arborescence de fichiers avec jQuery

- Auteurs : Cory S.N. LaViska, Alban Lelasseux

- Parution : 23 avril 2009

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2009 Cory S.N. LaViska. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Présentation

- II. Fonctionnalités

- III. Compatibilité

- IV. Démo

- V. Téléchargement

- VI. Utilisation

- VI-A. Dépendances

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

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

- VI-D. Styliser l'arborescence des fichiers

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

- VII. Scripts serveur

- VIII. Script de connexion personnalisé

- IX. Historique des versions

- X. Licence et modalités d'utilisation

- XI. Remerciements

I - Présentation

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.

II - Fonctionnalités

- 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.

III - Compatibilité

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.

IV - Démo

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

V - Téléchargement

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 - Utilisation

VI-A - Dépendances

L'explorateur de fichiers jQuery nécessite jQuery 1.2 ou ultérieurs. Pour les effets, vous aurez besoin du jQuery Easing Plugin ou d'un autre plugin jQuery ayant le même emploi de votre choix.

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

Dans sa forme la plus simple, vous pouvez créer une arborescence de fichiers en utilisant le code suivant :

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

Où container_id est l'identifiant d'un élément DIV vide qui existe sur votre page. L'explorateur de fichiers se charge automatiquement lorsque votre page se charge.

VI-C - Configuration de l'explorateur de fichiers

Les paramètres sont passés sous forme d'objet à la fonction fileTree(). Les options valides comprennent :

Paramètre

Description

Valeur par défaut

root

dossier racine pour l'affichage

/

script

l'emplacement du fichier AJAX à utiliser côté serveur

jqueryFileTree.php

folderEvent

Événement déclenchant Développer/Réduire

click

expandSpeed

Vitesse à laquelle les branches s'élargissent (en millisecondes), -1 pour n'utiliser aucune animation

500

collapseSpeed

Vitesse à laquelle se replient les branches (en millisecondes), -1 pour utiliser aucune animation

500

expandEasing

Effet progressif à l'ouverture

none

collapseEasing

Effet progressif à la fermeture

none

multiFolder

Limiter ou non le navigateur à un sous-dossier à la fois

true

loadMessage

Message à afficher pendant le chargement (peut être du HTML)

Chargement…

Pour créer un explorateur de fichiers avec de multiples paramètres, votre code ressemblera à quelque chose comme ceci :

$(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

L'explorateur de fichiers repose à 100 % sur du style CSS. Pour que vos utilisateurs apprécient votre page, il faut soit utiliser la feuille de styles fournie pour afficher votre arborescence de fichiers ou créer les vôtres. Reportez-vous à jqueryFileTree.css pour apporter des changements dans les styles.

VI-E - Gérer la réponse

Quand un fichier est sélectionné, l'explorateur de fichiers jQuery passe le nom de fichier en tant que chaîne de caractères. La méthode la plus simple pour capter cet événement est d'utiliser une fonction anonyme. Si vous souhaitez passer le nom du fichier sélectionné à une fonction que vous créez et appelez openFile(), votre code ressemblera à ceci :

function openFile(file) {
// do something with file
}

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

VII - Scripts serveur

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.

VIII - Script de connexion personnalisé

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.)

IX - Historique des versions

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).

X - Licence et modalités d'utilisation

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

XI - Remerciements

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

Tous mes remerciements à RideKick et Bovino pour leur relecture.