version alpha du plugin
http://jtree.tk
options du plugin :
autoToggle : true/false // le plugin doit 'il gérer lui même les ouvertures et fermetures ?
multiFolder : true/false // fermeture automatique des autres répertoires du même niveau, j'ai pas encore codé le calcul du fil de fer, donc il y aura des bug graphique si à true
iconFolder // le repertoire, depuis l'endroit actuel ou se trouve les icones
icons: [ { icon:"images.png", ext:[ "jpg","jpeg","gif","png","bmp" ] },{ icon:"page_code.png", ext:[ "htm","html","php","txt" ] } ] // les icones à utiliser en fonction des extensions
openSpeed // vitesse d'ouverture des répertoires en ms
closeSpeed // vitesse de fermeture
icon // nom de fichier de l'icône par défaut
api
// création du "tree"
$.jtree(options)
// récupération de tous les répertoires
$.jtreeFolders()
// récupération de tous les fichiers
$.jtreeFiles()
// récupération de tout, fichier et rep
$.jtreeAll()
// le répertoire courant est il ouvert ?
$.jtreeOpened()
// ferme un répertoire
$.jtreeClose(options)
// ouvre un répertoire
$.jtreeOpen(options)
// inverse l'état d'un répertoire
$.jtreeToggle(options)
// récupère le niveau du dessus (à faire sur un répertoire)
$.jtreeParent()
// récupère le ul du dessus
$.jtreeParentList()
// récupère le ul associé au répertoire courant
$.jtreeGetList()
// path complet du fichier/répertoire actuel
$.jtreeGetPath()
code css, les images dot.png et dotb.png sont des images de 1px, une de la couleur du fil de fer et l'autre de la couleur de fond, chacune de 1px²
il faut aussi définir les images des répertoires ouverts/fermés (celles de
famfamfam sont très bien)
[nosmile]
ul.jtree span {
cursor:pointer;
padding:0;margin:0;
display:inline-block;
min-height:20px;
padding-left:20px;
margin-left:10px;
background-position:0 0, 8px 18px;
background-size : auto auto, 1px 100%;
background-repeat:no-repeat;
}
ul.jtree ul {
background-repeat : no-repeat;
background-position : 0 bottom , 0 0;
background-size : 1px 11px, 1px 100%;
background-image : url([url]img/icons/dotb.png), url([url]img/icons/dot.png);
padding:0;margin:0;
}
ul.jtree ul li {
background-repeat : no-repeat;
background-position : 0 8px;
background-size : 8px 1px;
background-image : url([url]img/icons/dot.png);
padding:0;margin:0;
}
ul.jtree span[data-state=open] { background-image:url([url]img/icons/folder_open.png), url([url]img/icons/dot.png); }
ul.jtree span:not([data-state=open]) { background-image:url([url]img/icons/folder.png); }
ul.jtree span:hover {
color:blue;
background-color:rgba(0,0,255,0.1);
}
ul.jtree {
list-style:none; font:1.2em;
background-color:#ffffff;
}
ul.jtree span:not([data-style="unclosable"]) + ul { display:none; }
ul.jtree span + ul { list-style:none; font-size:95%; margin-left:18px; }
code php scannant récursivement un répertoire
seed : le répertoire d'entrée
valid : extensions de fichier permises
unvalid : extension de fichier à dégager (c'est un ou l'autre)
path : laisser vide
function rscandir($seed,$valid=array(),$unvalid=array(),$path='')
{ $files = array_diff(scandir($seed.$path),array('.','..'));
$farray = array(); $darray = array();
foreach($files as $f)
{ $c = $path.$f;
$cp = $seed.$c;
if(is_file($cp))
{ if(!empty($valid))
{ $nfo = pathinfo($cp);
$ext = $nfo['extension'];
if(in_array($ext,$valid)) $farray[$f]=$c;
} else if(!empty($unvalid))
{ $nfo = pathinfo($cp);
$ext = $nfo['extension'];
if(!in_array($ext,$unvalid)) $farray[$f]=$c;
} else $farray[$f]=$c;
}
else
{ $dir = rscandir($seed,$valid,$unvalid,$c.'/');
if(!empty($dir)) $darray[$f]=$dir;
}
}
ksort($darray); ksort($farray);
return array_merge($darray,$farray);
}
code php générant le html attendu (des ul li imbriqués avec des span pour les nom, tout est class free sauf le ul du départ qui à une classe, nécessaire pour récupérer le path via jtreeGetPath)
data-state="open" à mettre si le répertoire doit être ouvert par default
data-style="unclosable" à mettre si le répertoire est infermable ^^
function getJtree($tree,$seed=1)
{ $out = '';
if($seed) $out .= '<ul class="jtree"><li><span data-state="open" data-style="unclosable">root</span><ul>';
foreach($tree as $name => $t)
{ if(is_array($t))
$out .= '<li><span>'.$name.'</span><ul>'.getJtree($t,0).'</ul></li>';
else $out .= '<li><span>'.$name.'</span></li>';
}
if($seed) $out .= '</ul></li></ul>';
return $out;
}
récupérer le contenu complet d'un répertoire, générer le html et l'afficher
print getJtree(rscandir('/var/www/monsite/data/',array('html','jpg','png')));
exemple de code jquery pour creer l'arbre
$("ul.jtree").jtree();
exemple de code pour afficher au clic sur un fichier le path correspondant :
$("ul.jtree").jtree().jtreeFiles().click(function(){ alert( $(this).jtreeGetPath() ); });
exemple de code pour faire soit même l'ouverture fermeture des répertoires :
var opt = { autoToggle:false };
var tree = $("ul.jtree").jtree(opt);
tree.jtreeFolders().click(function()
{ $(this).jtreeToggle();
ou :
var t = $(this); if(t.jtreeOpened()) t.jtreeClose(); else t.jtreeOpen();
});
exemple : mettre en vert tous les nom de fichier et au hover ils serons magenta, en rouge tous les nom de répertoire, au clic sur un répertoire on met celui ci en bleu :
var tree = $("ul.jtree").jtree();
tree.jtreeFiles().css("color","green").hover(function(){ $(this).css("color","#ff00ff"); },function(){ $(this).css("color","green"); });
tree.jtreeFolders().css("color","red").click(function(){ $(this).css("color","blue"); });
pour rester dans l'esprit jquery, tout est chainable :
exemple : fermer puis rouvrir un répertoire dès qu'il est ouvert
var opt = { autoToggle:false };
var tree = $("ul.jtree").jtree(opt);
tree.jtreeFolders().click(function()
{ var t = $(this); if(t.jtreeOpened()) t.jtreeClose(); else t.jtreeOpen().jtreeClose().jtreeOpen();
});
marche aussi en mode automatique :
var tree = $("ul.jtree").jtree();
tree.jtreeFolders().click(function()
{ var t = $(this); if(t.jtreeOpened()) t.jtreeClose().jtreeOpen();
});
exemple : fermer aussi le répertoire parent à la fermeture d'un répertoire
var tree = $("ul.jtree").jtree();
tree.jtreeFolders().click(function()
{ var t = $(this); if(!t.jtreeOpened()) t.jtreeParent().jtreeClose();
});
tous les events jquery classiques sont utilisables depuis jtreeFolders / jtreeFiles et les fonctions équivalentes
reste à finir le calcul du fil de fer pour le mode multifolder, le nécessaire pour remplir/supprimer/modifier/déplacer des fichiers et répertoires, et finir proprement l'api