jQuery Tag Cloud

Oggi vediamo come costruire una semplice Tag Cloud con jQuery (e un pò di PHP che non guasta mai) senza usare estensioni di terze parti.

Il PHP ci servirà solo per effettuare la query, e riempire in automatico la cloud.

Questa la struttura HTML:

<ul id="tag_cloud">
     <?php foreach ($objTag->getTagCloud() as $tc): ?>
         <li>
                 <a href="...">
                        <?php echo tc['t_nome']; ?>
                  </a>
           </li>
        <?php endforeach; ?>
   </ul>

A questo punto passiamo al Javascript.

Usando jQuery, ricordatevi di includerlo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

A questo punto vediamo lo script vero e proprio:

$(document).ready(function() {

    $('#tag_cloud li').each(function() {
        var $a = $(this).find('a');
        var cssColor = randomColor();
        var cssFontSize = setFontSize();
        var linkOffsets = setOffsets();
        $a.css({color: cssColor, fontSize: cssFontSize, top: linkOffsets.top, left: linkOffsets.left});
    });
});

function randomColor() {
    var hex = '0123456789ABC'.split('');
    var color = '#';
    for (i = 0; i < 6; i += 1) {
        color = color + hex[Math.floor(Math.random() * 13)];
    }
    return color;
}

function setFontSize() {
    //var maxFontSize = 30;
    //var fontSize = Math.floor(Math.random() * maxFontSize + 11) + 'px';
    var fontSize = Math.floor(Math.random() * 1 + 19) + 'px';
    return fontSize;
}

function setOffsets() {
    var offsets = {};
    var randTop = Math.floor(Math.random() * 10);
    var randLeft = Math.floor(Math.random() * 10);
    var maxTop = Math.floor(Math.random() * randTop) + 'px';
    var maxLeft = Math.floor(Math.random() * randLeft) + 'px';
    offsets.top = maxTop;
    offsets.left = maxLeft;
    return offsets;
}

Prima di tutto cicliamo sulla lista alla ricerca alla ricerca di tutti i link.

Poi usiamo tre funzioni per impostare un pò di CSS dinamico:

• colori random
• larghezza dei font (ci sono due righe commentate da provare volendo)
• lo spazio tra le voci

Infine un pò di CSS generale:

#tag_cloud {
    padding: 0.5em 0;
    margin: 0.5em;
    list-style: none;
    font: 100% Arial, sans-serif;
    line-height: 1.5;
}

#tag_cloud li {
    display: inline;
    padding: 0 1em;
}

#tag_cloud li a {
    text-decoration: none;
    position: relative;
}

E questo è quanto.

Con pochi passaggi abbiamo creato una Tag Cloud senza usare plugin esterni.

Ne potete vedere una implementazione a sinistra in basso in questo stesso blog.

Enjoy!