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
