Oggi vediamo uno dei vari plugin jQuery per filtrare e ordinare elementi in una pagina web.

L'effetto è molto piacevole, e non impatta sulle prestazioni, in quanto non ci sono query su db e refresh dei dati.

Si occuperà il plugin di fare tutto a spostare i blocchi, ecc...impostando l'HTML in maniera corretta.

Il plugin di cui parliamo oggi si chiama Filterizr!

Tendenzialmente per eseguire richieste AJAX uso jQuery.

Semplifica veramente la vita rispetto allo Javascript puro; inoltre lo uso per tante altre cose, quindi va da se che mi conviene usarlo.

Però ho scoperto un'altra libreria per eseguire AJAX, senza l'utilizzo di altre librerie: Qwest!

E' veramente molto semplice da usare, tanto che consiglio vivamente di provarla; intoltre il progetto mi sembra abbastanza attivo.

Vi propongo due funzioncine per identificare le dimensioni dello schermo e la risoluzione con Javascript:

  • risoluzioneVideo identifica la risoluzione di tutto il monitor, a prescindere dalla dimensione del browser
  • dimensioneFinestra identifica la grandezza del browser; in questo caso ho usato jQuery

Nella pagina ho impostato questo:

    $(function () {
        risoluzioneVideo();
        dimensioneFinestra();
        $(window).resize(function () {
            dimensioneFinestra();
        });
    });

In questo modo possiamo calcolare la nuova dimensione quando ridimensioniamo il browser.

Sul sito di Google Charts si trovano dei buoni esempi, ma nessuno che mostra come prendere i dati dal server trmaite AJAX, che è il caso più normale.

Oggi vediamo proprio questo.

Nell'esempio avremmo bisogno anche di jQuery, quindi:

        <script src="jquery.js"></script>
        <script src="https://www.gstatic.com/charts/loader.js"></script>

Una libreria Javascript che sto usando parecchio per la creazione di grafici è Google Chart.

Molto semplice da usare e da includere.

Oggi vediamo come impostare la "modalità" responsive.

In eveirà la cosa è molto semplice: questo il div:

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="jquery.js"></script>
   <column cols="6" class="cols_chart">
        <div id="chart_entrate"></div>
    </column>

Come vedete non ho impostato misure.