Vi voglio segnalare un altro ottimo plugin JQuery, che ritengo molto utile quando si sviluppano siti con layout a dimensioni fisse e con la possibilità di avere diverse risoluzioni a schermo. Questo plugin Jquery implementa funzionalità di media queries, ovvero delle espressioni logiche dichiarate nel media type, che ci consentono di creare una dinamismo nelle nostre pagine in base a dei controlli (min-width e max-width in px), determinando quale css applicare dinamicamente in base alla risuluzione dell’utente. Molto importante ricordare che questo jquery plugin media queries rispetta gli standard W3C ed è compatibile con tutti i browser moderni, ovvero >= IE6.

Lo script come possiamo vedere dall esempio sotto riportato, è molto semplice da utilizzare, come del resto lo sono tutti i Jquery che stò apprezzando e utilizzando sempre di più nei miei siti web. Ecco un esempio di utilizzo:

Come possiamo vedere nel codice abbiamo un CSS di default per i media screen e projection al quale vengono aggiunti altri 2 CSS che per la visualizzazione a schermo attraverso i controlli diventano esclusivi.

Sulla pagina ufficiale del plugin è possibile testarne il funzionamento effettuando un resize della pagina notando il cambiamento del colore del box, indice di switching del css.

Riferimenti:
http://www.protofunc.com/scripts/jquery/mediaqueries/

Uno di questi é il jQuery Media Plugin che supporta la conversione di un semplice e conciso tag in un un markup per un contenuto multimediale. Puo’ essere utilizzato per integrare facilmente in una pagina web media come Flash, Quicktime, Wndows Media Player, Real Player, MP3, Silverlight, PDF e tanti altri. In sostanza questo plugin converte l’elemento html, solitamente il tag con una classe css assegnata, in un contenente tag come object o iframe necessari per rendere all’utente il contenuto multimediale.

Questo media plugin jquery puo’ essere utilizzato in tutte quelle situazioni in cui si vuole rendere veloce l’inserimento di questi contenuti, e dotare anche gli utenti inesperti di un modo semplice per aggiornare i contenuti multimediali dei siti web, inserendo semplicemente dei link.

Vediamo che includendo le librerie necessarie del jquery e del media plugin:

e aggiungendo semplicemente questo codice che assegna al tag con la classe css .media il media plugin:

possiamo ottenere questo tipo di risultato visibile nella demo:

questi link verranno tradotti automaticamente in questo codice:

E’ possibile inoltre passare paramentri e specificare alcune opzioni al nostro media plugin integrando un altro codice jquery chiamato metadata plugin scaricabile da qui, ovviamente anch’ esso dovrá essere incluso nel nostro codice della pagina insieme agli altri jquery:

Come possiamo vedere con questo jquery metadata plugin possiamo specificare ulteriori opzioni al media plugin e quindi rendere piú configurabili in nostri contenuti.

Chiaramente questa é sola una intruduzione all’utilizzo, per avere maggiori dettagli fate riferimento al sito ufficiale.

Riferimenti:
http://www.malsup.com/jquery/media/