MediaTable jQuery Plugin

Oggi mi sono imbattuto in un ottimo articolo di FilamentGroup riguardante l’usabilità di una tabella dati su schermi di piccole dimensioni. (link articolo)

La soluzione proposta consiste nel definire due o più gruppi di colonne assegnando varie classi (Es: essential, optional, etc..) quindi utilizzare delle media-query CSS per visualizzare e nascondere gruppi di colonne in base alle dimensioni del display.

Si tratta dunque di un esempio di design responsivo.

Trovando la soluzione molto interessante ho costruito un plugin jQuery che rende estremamente semplice realizzare sulle proprie pagine web quanto spiegato nell’articolo.

>>> Vai alla demo! <<<

MediaTable in Azione:

In questo primo screenshoot vediamo una tabella di cui sono visualizzate solamente le colonne veramente importanti. Siamo su di uno schermo di piccole dimensioni!

Cliccando sul menu “columns” (il cui nome è configurabile) si apre un menu contenente l’elenco completo delle colonne disponibili nella tabella. Possiamo variare a piacere il numero di colonne visualizzate mettendo in relazione informazioni differenti.

Questo menu è generato automaticamente! Il sorgente di questo esempio, come spiegato successivamente, è una semplice tabella dati HTML!

>>> Vai alla demo! <<<

Come si usa MediaTable?

MediaTable richiede la definizione di una tabella HTML definita correttamente ovvero con THEAD e TBODY. Le colonne di intestazione vanno raggruppate per classe in base alla priorità di visualizzazione.

Via CSS si imposteranno dei breakpoint su cui definire quali gruppi di colonne visualizzare. Il plugin costruisce inoltre un menu delle colonne disponibili per consentire una selezione manuale esplicita delle colonne da visualizzare.

Il nostro esempio utilizza 3 gruppi di colonne:

• essential – visibili su qualunque schermo
• optional – visibili dai 768px (iPad portrait)
• n/a – visibili dai 1024px (iPad landscape)

Un’ulteriore classe “persist” è utilizzata per identificare colonne che non sono gestite dal menu. Impostando una colonna con le classi essential e persist essa non potrà mai essere nascosta!

<table class="mediaTable">
<thead>
<tr>
<th class="essential persist">Employee</th>
<th class="essential">xHTML</th>
<th class="optional">HTML5</th>
<th class="essential">CSS</th>
<th class="essential">JS</th>
<th class="optional">jQuery</th>
<th class="optional">jQueryUI</th>
<th>jQuery Mobile</th>
<th>Sencha Touch</th>
<th class="essential">PHP</th>
<th>PHP (OO)</th>
<th class="optional">CakePHP</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marco Pegoraro</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
</tr>
<tr>
....
</tr>
</tbody>
</table>

Il codice javascript per l’inizializzazione del plugin è estremamente semplice:

$('.mediaTable').mediaTable();

Tutte le tabelle aventi classe “mediaTable” verranno attivate per consentire la selezione dei campi ed il comportamento responsivo rispetto alle dimensioni dello schermo.

>>> Vai alla demo! <<<

Compatibilità:

Ho testato il plugin sui seguenti sistemi:

• Mac OsX, Firefox 9.0.1
• Mac OsX, Firefox 4.0
• Mac OsX, Chrome 16
• Mac OsX, Safari 5.1.2
• Windows7, IE9
• Windows7, IE8, IE7, IE6 (with respond.js for media-query)
• Windows7, Firefox 7.0.9

Fork on GitHub:

Il plugin è di libera distribuzione!

Link al progetto pubblico su GitHub!

Credits DT Author Box

Scritto da MPeg

Progetto e sviluppo applicazioni web basate su CakePHP e jQuery. Fornisco consulenza e formazione su PHP, Javascript, HTML5, CSS, CakePHP, jQuery, jQueryUI, BackboneJS, LESS. Inoltre scrivo articoli e seminari riguardanti l’usabilità delle interfacce web, ottimizzazione del codice e delle prestazioni di pagine ed applicazinoni web. Oltre al web le mie grandi passioni sono l’escursionismo in montagna, la mountain bike, la V-Strom ed in generale quasi qualunque sport che non faccia successo in TV!

Sito web dell’Autore

Segui l’autore su Twitter

• Delicious