Prima di jQuery avevo provato altri frameworks ma non riuscivo sempre a fare quello che volevo (ammetto per mia colpa). Naturalmente, più si lavora con un framework e più escono idee interessanti e a volte molto semplici.. come ad esempio giocare con i tags.
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>
l'esempio precedente utilizza una immagine close.png che potete eventualmente cambiare.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>');
su ogni selezione viene richiamato il metodo onSelectChange che aggiunge un tags alla lista, se viene selezionato un option con value nullo viene rimosso tutto, questo per permettere velocemente la cancellazione di tutti i tags aggiunti.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;
}
}
Praticamente viene aggiunto un elemento span che identifica la scelta fatta, se invece l'elemento scelto è quello con value nullo viene rimosso tutto, azzerandone la situazione.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>
Da ricordarsi che il codice jquery/javascript per funzionare richiede un elemento div con id tags-list che è il contenitore dei tags e un elemento select con id cat che serve per la scelta.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