In questo posts voglio proporvi una soluzione fai-da-te per una piccola e veloce gestione di tags che non si basa su un pugin e per lo scopo richiede solamente la libreria jQuery (le prove e lo sviluppo le ho eseguite con la versione 1.2.6).
Prima di tutto una breve introduzione a cosa sono i tags?
I tags servono a organizzare i contenuti e ne rendono chiaro il contesto; sono come delle etichette o delle parole chiavi ben conosciute e distinguibili.
A dire il vero molti le usano come categorie oppure per affinare una ricerca. Proprio per questo motivo non sono sempre solo delle informazioni da leggere ma anche da manipolare e sfruttare per restringere uan ricerca.
Per esempio, se stiamo eseguendo una ricerca e cerchiamo la parola 'Notizia' potrebbe uscire una serie di tags disponibili per restringere la ricerca es: Sports, Economia, Politica.. che distinguono proprio alcuni articoli (precedentemente etichettati o taggati).
Ok, fatta questa breve introduzione vi mostro una soluzione molto semplice, è possibile provarla anche in locale salvando questo codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>tags</title>
<script type="text/javascript" src="jquery-1-2-6.js"></script>
<meta name='author' content='nickel22' />
<style>
html {
background: #cccccc;
}
.tags {
cursor:pointer;
width:7em;
border:0.126em solid gray;
margin-top:0.5em;
margin:0.126em;
background:#cccccc url('close.png') no-repeat center right;
display:none;
}
#tags-list {
height:2.5em;
border:0.126em dotted orange;
margin-top:2em;
margin:0.256em;
padding-top:1em;
background:#cccccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#cat").change(onSelectChange);
$('select#cat').append('<option value="">Rimuovi tutti</option>');
$('select#cat').append('<option value="Sport">Sport</option>');
$('select#cat').append('<option value="Politica">Politica</option>');
$('select#cat').append('<option value="Hitech">Hitech</option>');
$('select#cat').append('<option value="Cronaca">Cronoca</option>');
$('select#cat').append('<option value="Economia">Economia</option>');
$('select#cat').append('<option value="Salute">Salute</option>');
$('select#cat').append('<option value="Spettacolo">Spettacolo</option>');
function onSelectChange() {
var value = $('#cat').val();
if (value == '') //selezionato elemento nullo rimuovo tutti i tags
{
$('div#tags-list > span').fadeOut(1000, function() { $(this).remove(); });
// pulisco tutto, se devi fare qualcosa scivilo di seguito..
// altrimenti
return;
}
else
{
$('div#tags-list').append('<span id="'+value+'" class="tags" > '+value+' </span>');
$('span#'+value).fadeIn(1000);
$('span#'+value).click(removeTag);
// selezionato tag aggiuntivo, fai qualcosa se vuoi..
return;
}
}
function clearAndRemoveAll() {
$('select#cat > option').remove();
$('select#cat').append('<option value="">Rimuovi tutti</option>');
$('div#tags-list > span').fadeOut(1000, function() { $(this).remove(); });
// pulisco tutto (compreso lista di option), se devi fare qualcosa scivilo di seguito..
}
function removeTag() {
$(this).fadeOut(1000, function() {
$(this).remove();
// rimosso tag aggiuntivo, fai qualcosa se vuoi..
});
}
});
</script>
</head>
<body>
<select id="cat" name="cat" size="1" style="width:10em"></select>
seleziona qualcosa dala lista, tanto per..<br>
<div class="tabs-container">
<div id="tags-list"></div>
</div>
</body>
</html>
Il codice è molto semplice si utilizza un componente select a cui si caricano i tags disponibili che nell'esempio sono:
$("#cat").change(onSelectChange);
$('select#cat').append('<option value="">Rimuovi tutti</option>');
$('select#cat').append('<option value="Sport">Sport</option>');
$('select#cat').append('<option value="Politica">Politica</option>');
$('select#cat').append('<option value="Hitech">Hitech</option>');
$('select#cat').append('<option value="Cronaca">Cronoca</option>');
$('select#cat').append('<option value="Economia">Economia</option>');
$('select#cat').append('<option value="Salute">Salute</option>');
$('select#cat').append('<option value="Spettacolo">Spettacolo</option>');
Una volta selezionato un option il codice di creazione tags è il seguente:
function onSelectChange() {
var value = $('#cat').val();
if (value == '') //selezionato elemento nullo rimuovo tutti i tags
{
$('div#tags-list > span').fadeOut(1000, function() { $(this).remove(); });
// pulisco tutto, se devi fare qualcosa scivilo di seguito..
// altrimenti
return;
}
else
{
$('div#tags-list').append('<span id="'+value+'" class="tags" > '+value+' </span>');
$('span#'+value).fadeIn(1000);
$('span#'+value).click(removeTag);
// selezionato tag aggiuntivo, fai qualcosa se vuoi..
return;
}
}
Ogni elemento span, se premuto, richiama un metodo che lo rimuove permettendo così una rettifica di alcuni tags senza cancellarli tutti.
Per personalizzare gli elementi span e il contenitore bisogna aggiungere uno stile simile al seguente:
<style>
html {
background: #cccccc;
}
.tags {
cursor:pointer;
width:7em;
border:0.126em solid gray;
margin-top:0.5em;
margin:0.126em;
background:#cccccc url('close.png') no-repeat center right;
display:none;
}
#tags-list {
height:2.5em;
border:0.126em dotted orange;
margin-top:2em;
margin:0.256em;
padding-top:1em;
background:#cccccc;
}
</style>
E' presente anche un metodo clearAndRemoveAll di convenienza perchè permette di azzerare la lista di option (lasciando quello generico con value null per rimuoverli tutti) e pulisce la lista da tutti i tags inseriti. Buona tagatta!
Collegamenti esterni: jQuery
