Progettazione della pagina Circa un jQuery UI Theme

Il rilascio di jQuery UI 1,5 ha portato con sé la Themeroller, che è un modo rapido e facile da personalizzare e scaricare una serie di jQuery "widget" per l'uso su una pagina web.

Basta scegliere uno dei temi predefiniti, o modificare le impostazioni a proprio piacimento proprio e scaricare il tema. Il download include tutti i file necessari per tutti questi widget al lavoro, e un file demo con tutti loro in una pagina.

In realtà, tali pre-tematico costruito potrebbe servire anche come punto di partenza per un nuovo design. Let's manipolare un download tema in un sito web di base usando le schede e fisarmonica.

La pulizia della casa

Stiamo andando ad utilizzare il widget di schede per la nostra zona contenuto principale del sito, e la fisarmonica per la sidebar. Un buon primo passo sarebbe quello di ottenere la vostra cartella organizzata e quindi avviare la rimozione di codice aggiuntivo dal file HTML e CSS.

Ho iniziato da ri-nominare il file index.html e demo.html per il file CSS per style.css.

Allora ho rimosso tutti i CSS dal file CSS che aveva a che fare con altro che le schede e la fisarmonica. Ci sono un sacco di cruft extra nel file CSS di default, tra cui il ripristino di tonnellate di elementi che in realtà non serve se si utilizza una reimpostazione globale. Casa pulita a volontà qui.

Poi fare la stessa cosa nel file HTML, rimuovendo tutto il codice che non è la struttura di base o di una parte delle schede o fisarmonica. Ecco la mia pagina si presenta come dopo la pulizia:

Struttura

Le schede fanno buon senso di utilizzare come area di contenuto principale di un sito. Ciascuna delle schede possono essere sostanzialmente una diversa area del sito. Prima di tutto, consente di avvolgere l'intero sito in un div con un ID di pagina-wrap in modo che possiamo centrare e impostare una larghezza fissa. Poi dato che sia le schede e fisarmonica sono già in confezione div, possiamo colpirli con i CSS, impostare larghezze statico e flottante a entrambi i lati. Questo è ciò che il CSS potrebbe essere simile:

#page-wrap { width: 900px; margin: 0 auto; } #accordion { width: 280px; float: right; } #tabs { width: 600px; float: left; } 

Ora le schede stanno assumendo più di un aspetto principale contenuto e la fisarmonica è come una barra laterale. Ogni scheda può funzionare come una diversa sezione del sito, solo che è un modo molto cool dinamica di farlo, poiché le pagine di commutazione non richiedono alcun caricamento della pagina a tutti!

Ecco la mia pagina sembra dopo un po 'di ristrutturazione:

Concretizzare i contenuti

Let's Get che il contenuto di default fuori di lì e iniziare a collegare la nostra roba. Beh, questo è ancora un demo così lascio la maggior parte di quella roba Lorem Ipsum ... Ma ora un'occhiata dopo aver lancio in una grafica pochi e plug in alcuni dei contenuti più realistico:

Finale

Che l'intero sito sono voluti circa 20 minuti per mettere insieme. Non è un capolavoro con qualsiasi mezzo, ma è un buon inizio per una bella e pulita in cerca del sito. Dimostra quanto velocemente si può cominciare a costruire pagine web e anche con cool funzionalità dinamiche attraverso jQuery e il themeroller UI.

Guarda le Demo

DOWNLOAD FILES