Jquery & Php: Créer une arborescence de fichiers

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

Démonstration de 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

New look on my laptopNouvelle interface

A small post, different as the other because it’s not about my Sweden trip but it’s about this thing because of some common people call me « geek »: Linux, particulary its graphical interface.

I just leave Gnome, too heavy, too much time to load and not exactly as I wanted, too much files on the desktop. So I installed OpenBox and I am glad!

I you would like try something more light (for performances or visual light) you could install OpenBox:

sudo apt-get install openbox obmenu obconf

After, it’s up to you to customise your workspace as you wish!

Here is the list of the softs I use with my new openbox desktop:

nitrogen for the wallpaper

– adeskbar for the dock (a python written dock really light and fast, easy to setup, without the eyecandy effects of cairo-dock or other in the same category)

tint2 for the systray and windows (customisable, lightweight: match exactly with Openbox)

conky everyone know this one 🙂 for the systems informations on the desktop

parcellite, paste manager (very usefull and smart if you enjoy the ctrl-c ctrl-v )

redshift, for your eyes, it adjusts the color temperature of your screen according to your surroundings.(thank’s Luc !)

Here is my autostart file that you could modify for your config!

My new interface

Un petit post différent des autres car celui-ci ne traite pas de la Suède mais d’un truc qui me vaut l’appelation de Geek par le commun des mortel: Linux et plus particulièrement l’interface graphique de celui-ci.

J’ai laissé tombé l’interface Gnome, trop longue à charger, trop lourde et pas exactement comme je voulais, trop de bazar sur le bureau. Je suis passé à OpenBox et je suis ravis!

Si vous aussi vous voulez passer à quelque chose de plus leger (par soucis de performances, ou de légerté visuelle) vous pouvez installer openbox:

sudo apt-get install openbox obmenu obconf

Après, libre a vous de personaliser votre environnement de travail avec ce que vous voulez!

Voici la liste des programmes que j’utilise avec mon openbox fraichement installé:

nitrogen pour le wallpaper

– adeskbar pour le dock (un dock écrit en python vraiment leger et rapide à mettre en place, sans tout les effets eyecandy de cairo-dock ou autres du genre)

tint2 pour la barre de notifications/fenêtres (personnalisable, léger et sobre: correspond parfaitement à l’esprit Openbox)

conky je dois vraiment le présenter celui-là? 🙂 pour afficher les infos sur le bureau

parcellite, un gestionnaire de presse papier (vraiment très pratique pour s’y retrouver lorsqu’on est adepte du ctrl-c ctrl-v )

redshift, pour que vos yeux vous remercient si vous bossez souvent et longtemps sur un écran! (merci Luc pour la découverte!)

Voici mon fichier autostart que vous pourrez, bien entendu modifier selon votre config!

Ma nouvelle interface