Progettazione della pagina Circa un jQuery UI Theme

The release of jQuery UI 1.5 brought with it the Themeroller , which is a quick and easy way to customize and download a set of jQuery “widgets” for use on a web page.

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.

Cui ho cominciato da ri-nominare il file index.html per demo.html e 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. There is a lot of extra cruft in the default CSS file, including resets on tons of elements that don't really need it if you use a global reset. 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:

Def

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