Creare un layout con jQuery Ui Position e qualche riga di CSS
Pagina 1 di 3
Quando penso a cosa proporre in un articolo valuto ovviamente per prima cosa l'utilità dell'argomento. Per questo motivo fino ad ora avevo scartato tra le papabili scelte l'utility Position di jQuery Ui. Mi sbagliavo, e di parecchio. Catalogarlo come "underdog" è stata un decisione affrettata alla quale però posso rimediare.
Di cosa si tratta
Ui Position è un pacchetto di low lovel utilities aggiunto di recente ad Ui che permette in buona sostanza di gestire facilmente la posizione degli elementi di una pagina web.
Semplifichiamolo in questo modo ( mi perdonino i puristi ): Ui Position permette di dire facilmente al browser "posizionami il div X all'angolo in basso a destra del div Y".
I programmatori client hanno sempre potuto implementare queste logiche, ma Ui Position le rende enormemente più facili da esplicitare.
Come utilizzarlo
Forse è un pò estrema come applicazione ma perchè non usarlo per creare l'intera struttura di un sito?
Pensate ad un semplice sito statico inizialmente, per non volare troppo in alto. Il classico sito che avete promesso al vostro amico.
Una struttura base con un header, un menu, dei contenuti ed un footer. Ora davanti a questo scenario io sollevo di solito le seguenti considerazioni:
- Non sono un fenomeno con i CSS quindi perderei molto tempo per sistemare correttamente la struttura al primo colpo
- Quel sito che avevo strutturato così bene non so più nè come si chiama nè dove sia il codice che avevo prodotto
- Faccio sempre fatica a posizionare le voci del menu...
- Vorrei non metterci tre mesi
- I miei amici grafici sono in ferie...
Il risultato finale da ottenere
Ecco dove ci porterà il nostro lavoro:
