Ordine gerarchico per directory (e non solo) con JQuery

Dopo un articolo di qualche mese fà su eleganti box con JQuery, oggi riporto come creare una struttura gerarchica come quelle di un qualunque filesystem, per capirci, che in ambito web può essere utile in varie circostanze.
Anche questo codice, come quella dell'articolo precedente già citato, è stato creato per il progetto Enchanted Webmail, anche se qui è riportato in una versione diversa e limitata. Il codice originale include anche l'uso di AJAX per ottenere dinamicamente le informazioni sulle Mailboxes IMAP, ed è consultabile nella pagina del progetto su Launchpad.

Questa è l'anteprima di quanto è possibile ottenere:



Il codice HTML è troppo lungo per essere scritto interamente qui, quindi riporto un breve estratto. Il link al codice completo è riportato alla fine dell'articolo.

L'HTML non è il massimo dell'eleganza nè validato al 100%, appunto perchè è generato dinamicamente tramite chiamate AJAX (il progetto è ancora in fase di sviluppo).

[..]
<div id="mboxApache" class="mailbox">
<span class="mailboxname">

  <img src="media/images/hide_mailbox.png" id="Apache" alt="Hide Children" class="actionmailbox folder">

  <a href="/mailboxes/Apache">Apache</a>

</span>

<div class="children" id="childrenApache">

    <div id="mboxApache__slash__prova" class="mailbox">

    <span class="mailboxname">

      <img src="media/images/hide_mailbox.png" id="Apache__slash__prova" alt="Hide Children" class="actionmailbox folder">

      <a href="/mailboxes/Apache/prova">prova</a>

    </span>
    <div class="children" id="childrenApache__slash__prova">

    <div id="mboxApache__slash__prova__slash__3rd__space__level__space__2" class="mailbox">
    <span class="mailboxname">

      <img src="media/images/mailbox_nochildren.png" alt="No Children" class="folder">

      <a href="/mailboxes/Apache/prova/3rd%20level%202">3rd level 2</a>

    </span>

    </div>



    <div id="mboxApache__slash__prova__slash__testing__space__29__space__Nov" class="mailbox">
      <span class="mailboxname">

        <img src="media/images/show_mailbox.png" id="Apache__slash__prova__slash__testing__space__29__space__Nov" alt="Hide Children" class="actionmailbox folder">


        <a href="/mailboxes/Apache/prova/testing%2029%20Nov">testing 29 Nov</a>
      </span>
[..]

Il file javascript principale è il seguente:

/* Copyright (C) 2008 Lorenzo Sfarra (lorenzosfarra@ubuntu.com)
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*
* NOTE: jquery required.
*/

SHOWMAILBOX='media/images/show_mailbox.png';
HIDEMAILBOX='media/images/hide_mailbox.png';
LOADING='media/images/icons/loading.gif';

function mailboxes_management(element) {
// Add "children" to the current id to obtain the children div's id
var childrenid = "#children" + $(element).attr('id');
if ($(element).attr('src') == SHOWMAILBOX) {
$(childrenid).removeClass("invisible");
$(childrenid).slideDown(400);
$(element).attr('src', HIDEMAILBOX);
} else if ($(element).attr('src') == HIDEMAILBOX) {
$(element).attr('src', SHOWMAILBOX);
$(childrenid).fadeOut(400);
}

}

function show_hide_children() {
$(".mailboxeslist").click(function(event) {
element = $(event.target);
mailboxes_management(element);
});
}

$(document).ready(function() {
show_hide_children();
});

Lo script precedente si occupa di nascondere/mostrare in modo elegante il contenuto della "directory", e di cambiare l'icona della directory stessa in base all'azione appena effettuata.

Vediamo anche il CSS:

.mailboxeslist {
margin-top: 25px;
margin-left: 25px;
margin-bottom: 30px;
}

.mailboxeslist .mailboxname {
margin-left: 10px;
font-size: 1.2em;
margin-top: 0px;
}

.mailboxeslist .children {
margin-left: 10px;
border-left: 1px solid #dddddd;
margin-top: 0px;
padding-top: 5px;
}

.mailboxeslist a, .mailboxeslist a:visited {
color: #002b3d;
}

.mailboxeslist a:hover, .mailboxeslist a:active {
color: #0169c9;
}

.mailboxeslist .leaf, .mailboxeslist .leaf:visited {
color: #d40000;
}

.folder {
float: left;
}

.parentmailbox {
margin-bottom: 20px;
margin-top: 10px;
}

.mailbox {
margin-top: 5px;
}

.mailboxesplainlist {
line-height: 1.7em;
margin: 15px 0px 20px 20px;
color: #002b3d;
}

.mailboxesplainlist a, .mailboxesplainlist a:visited {
color: #002b3d;
}

.mailboxesplainlist a:active, .mailboxesplainlist a:hover {
color: #0169c9;
}

.rootmailbox {
background: #ededed url(../images/mailbox_nochildren.png) no-repeat left 40%;
padding: 5px;
margin: 6px;
padding-left: 40px;
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-left: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}

Puoi provare un demo qui.

Per quanto riguarda il codice completo:

• il sorgente per l'HTML;
• il sorgente per il JS;
  
• il sorgente per il CSS;