Créer rapidement une interface web en Jquery permettant de mettre à disposition des fichiers est facile à mettre en place. Demonstration avec JqueryFileTree!

L’utilisation du plugin JQueryFileTree nécessite Jquery, bien entendu, ainsi que JQueryEasing (pour les animations).
Téléchargez donc le plugin JQueryFileTree ainsi que ces 2 fichiers et placez les dans le répertoire de votre choix.
Créez les liens vers ces fichiers dans la section head de votre page index.php
<link href href="css/style.css" type="text/css" />; <link rel="stylesheet" href="css/jqueryFileTree.css" type="text/css" />; <script src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3"></script>; <script type="text/javascript" src="js/jqueryFileTree.js"></script>;
Ensuite, créez un élément <div> ayant pour id « container_id » par example, vous pouvez alors appeler le script avec:
<script type="text/javascript"> $(document).ready( function() { $('#container_id').fileTree({ root: './files/', folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, }, function(file) { open(file); }); }); </script>;
N’oubliez pas de changer l’option « root: » en choisissant le dossier qui contiendra les fichiers à partager.
Par défaut, le connecteur php est utilisé (jqueryFileTree.php) , mais vous pouvez aussi utiliser un des nombreux connecteurs écrit dans différents languages: ASP, ASP.NET, JSP, Ruby, Python… Pour cela, vous devez ajouter à la liste des options lors de l’appel du plugin:
script: 'jqueryFileTree.py'
Résumé des paramètres que vous pouvez utiliser:
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… |
Voici une archive avec un exemple de base: JQueryFileTree_example.zip
Vous pouvez aussi voir une démo sur mon site sur cette page