Anche se con colpevole ritardo, voglio segnalare alcuni plugin realizzati e prontamente segnalati dai alcuni lettori di jQuery Italia.
Il primo, MediaTable, è di Marco Pegoraro che ha abilmente trasformato in plugin un articolo di FilamentGroup riguardante l’usabilità di una tabella su schermi di piccole dimensioni. Si tratta quindi di un plugin utilizzabile in un contesto di responsive design.
Mediatable richiede solamente la corretta definizione di una tabella html (definita quindi con i tag THEAD e TBODY) con le colonne di intestazione raggruppate (per classe) in base alla priorità di visualizzazione.
Basterà quindi inizializzare il plugin nella seguente maniera:
| 1 | $('.mediaTable').mediaTable(); |
per consentire la selezione dei campi ed il comportamento “responsive” rispetto alle dimensioni dello schermo di tutte le tabelle definite con classe “mediaTable”.
Il plugin, come dichiarato dallo stesso autore, è compatibile con tutti i principali browser e di libera distribuzione.
Potete trovare la documentazione, con relativa demo e link per il download alla pagina http://www.consulenza-web.com/2012/01/mediatable-jquery-plugin/.
Il secondo plugin mi è stato inviato dall’amico ed ex-collega Luca Mattiuzzo.
Si tratta di hideValueOnFocus, un piccolo plugin che permette di nascondere il valore definito in un campo di testo (quindi essenzialmente nei campi input di un form) quando l’utente clicca su di esso, ripristinandone il valore se l’utente non inserisce nulla.
L’utilizzo è molto semplice e consiste nel definire il campo di testo:
| 1 | <input type="text" name="email" value="insert your email here" /> |
ed inizializzare il plugin nel seguente modo:
| 1 2 3 | $( function() { $( '#myForm input[type=text]' ).hideValueonFocus(); }); |
Essendo il plugin estremamente piccolo ve lo fornisco di seguito.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | /** * hideValueOnFocus plugin * * hides the value of a text field if the user clicks on it. * restores the value on blur, if the user didn't write in it. * * Version 1.0 * Updated 11/06/2012 * * Copyright (c) 2012 Luca Mattiuzzo (stanza27.com) * * Usage example: * HTML: <input type="text" name="email" value="insert your email here" /> * JS: $(document).ready(function(){ $('#myForm input[type=text]').hideValueonFocus(); }); * */ (function($) { $.fn.hideValueonFocus = function() { this.each(function() { // store the devault value in each field $(this).data('default_value', $(this).val()); $(this).bind('click focusin focus', function() { // empty the field when the user writes in it for the first time if ($(this).val() == $(this).data('default_value')) { $(this).val(''); } }) .blur(function(){ // display the default value if the user deletes the inserted value if ($(this).val() == '') { $(this).val($(this).data('default_value')); } }); }); return this; } })(jQuery); |
La terza ed ultima segnalazione riguarda, più che un plugin, una estensione dell’elegante, intuitivo e potente framework front-end che va sotto il nome di Twitter Bootstrap.
Mattia Larentis (questo il nome dell’autore dell’estensione) ha infatti realizzato Bootstrap Toggle Buttons (arrivato alla versione 2.8) che rende appunto disponibili per Twitter Bootstrap gli switch.
Non mi dilungo più di tanto nelle spiegazioni in quanto, per capire di cosa stiamo parlando è sufficiente andare alla pagina del progetto ( http://www.bootstrap-switch.org/ ).
L’estensione è comunque disponibile per il download su GitHub.
