Monday, December 29, 2008

I miei preferiti tra i plugin di JQuery

. Monday, December 29, 2008

Spinto dal bellissimo, nonchè utile articolo di Dave Ward, che consiglio vivamente di leggere, vi presento i miei di preferiti. 
Premetto che ci sono dei plugin JQuery di cui difficilmente uno sviluppatore web può fare a meno, per questo non posso esimermi dall’inserire nella lista i plugin TableSorter, QuickSearch e DatePicker.
Ma vediamo più nello specifico quali sono quelli che più apprezzo nel lavoro di ogni giorno:

  • Tablesorter  
    L’avevo segnalato un bel pò di tempo fa in questo post, e tuttora rimane indubbiamente il mio preferito, permettendomi in pochissimo tempo di implementare la funzionalità di ordinamento su una tabella html

    TableSorter  
    Anche se di facile utilizzo è necessario, nel caso di un controllo GridView di renderizzare l’elemento THEAD tramite il property HeaderRow:

       1: myGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

  • jQuery quickSearch
    Viene aggiunto un campo di ricerca attraverso il quale è possibile filtrare in tempo reale su tabelle, elenchi puntati o in paragrafi:


    quicksearch
    Posso garantire che l’accoppiata di quest’ultimo con il plugin TableSorter è estremamente vincente.
    Per chi ne vuole un assaggio consiglio l’articolo di Bill Beckelman correlato di esempio scaricabile.

  • jQuery lightBox
    Consente di ottenere la sovrapposizione di immagini presenti in una pagina:
    lightBox
    Sicuramente è quello che uso meno per via del tipo di applicazioni su cui mi concentro quotidianamente.
    Ad ogni modo un’interessante utilizzo può essere quello in combinata con un controllo GridView. Ad esempio con il seguente markup:
       1: <asp:GridView ID="dgrImage" runat="server" 
       2:               AutoGenerateColumns="false"
       3:               EnableViewState="false">
       4:   <Columns>
       5:     <asp:TemplateField>
       6:       <ItemTemplate>
       7:         <asp:HyperLink ID="hlUrl" runat="server" 
       8:                        ImageUrl='<%#Eval("ImageUrl") %>' 
       9:                        NavigateUrl='<%#Eval("Url") %>'>
      10:         </asp:HyperLink>
      11:       </ItemTemplate>
      12:     </asp:TemplateField>
      13:   </Columns>
      14: </asp:GridView>

    ed aggiungendo i riferimenti agli script e css:


       1: <script src="js/jquery.js" type="text/javascript"></script>
       1:  
       2: <script src="js/jquery.lightbox-0.5.js" type="text/javascript">
       1: </script>
       2: <link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
       3: <script type="text/javascript">
       4:   $(function() {
       5:     $('#dgrImage a').lightBox();
       6:   });
    </script>

    otteniamo un elenco di immagini incapsulate in una tabella.

    Le immagini all’interno del controllo GridView con id dgrImage vengono sovrapposte semplicemente richiamando la funzione lightBox.

    Recentemente sto prendendo in esame anche FlancyBox.

  • ClueTip


    clueTip Questo plugin permette di visualizzare un tooltip allo scatenarsi dell’evento mouseover o click.


    Fra le tante funzionalità merita di essere evidenziata la possibilità di richiamare tramite Ajax il testo da mostrare nel tooltip.





  • jqModal
    Estremamente utile nel caso si voglia visualizzare dialog box di alert/conferma, finestre modali:

    jQModal 

  • Progress Bar
    Una semplice progress bar:

    ProgressBar


  • E i vostri preferiti quali sono?

3 commenti:

vik said...

La lista che potrei farti è molto lunga... ;)
Te ne elenco tre che più che utili sono belli (ma sono anche utili soprattutto nel web design)
1. FancyBox
http://fancy.klade.lv/
2. Galleria
http://devkick.com/lab/galleria/
3. ScrollTo
http://demos.flesler.com/jquery/scrollTo/
Più Autocomplete
http://jquery.bassistance.de/autocomplete/demo/

Pierluca said...

Ciao vik, in effetti la lista può essere molto più lunga :), ma giustamente dipende molto dal tipo di lavoro che uno svolge.
FlancyBox lo trovo anch'io molto interessante (pian piano sta prendendo il posto di lightBox, anche se raramente uso questo genere di plugin).

nickel said...

vedo che abbiamo gli stessi plugin nella lista dei preferiti, oltre a questi a me piace anche modificarne e crearne.. in ogni caso se vuoi dai uno sguardo anche a jNice e idTabs davvero molto belli e personalizzabili (ahh ne approfitto.. se vuoi un breve tutorial su questi ultimi, e su altro, vi invito volentieri sul mio blog http://ondare.blogspot.com/search/label/jQuery spero ti piaccia!!)

ciao
nickel

Post a Comment