Créer une arborescence de fichiers avec jQuery

Date de publication : 23 avril 2009

Par Cory S.N. LaViska (Auteur)
 Alban Lelasseux (Traducteur)
 

Cet article est la traduction de l'article : jQuery File Tree. Retrouvez toutes les traductions de disponibles sur http://abeautifulsite.developpez.com.
Un plugin AJAX d'exploration de fichiers pour jQuery.

               Version PDF (Miroir)   Version hors-ligne (Miroir)

I. Présentation
II. Fonctionnalités
III. Compatibilité
IV. Démo
V. Téléchargement
VI. Utilisation
VI-1. Dépendances
VI-2. Création d'une arborescence de fichiers
VI-3. Configuration de l'explorateur de fichiers
VI-4. Styliser l'arborescence des fichiers
VI-5. Gérer la réponse
VII. Scripts serveur
VIII. Script de connexion personnalisé
IX. Historique des versions
X. Licence & 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 language 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 oeuvre ;
  • 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 multi-dossier 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 contre-partie. 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-1. Dépendances

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


VI-2. 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-3. 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 coté serveur jqueryFileTree.php
folderEvent Evé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-4. 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-5. 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 :

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 & Modalités d'utilisation

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


XI. Remerciements

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

Tous mes remerciements à RideKick et Bovino pour leur relecture.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

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. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum JavaScript

Blogs

Hébergement

 
Partenaires

Hébergement Web