Designing Your Side Rundt en jQuery UI Theme

Utgivelsen av jQuery UI 1,5 brakte med seg Themeroller, som er en rask og enkel måte å tilpasse og laste ned et sett med jQuery "widgets" for bruk på en nettside.

Bare velg fra en av de pre-bygget temaer eller justere innstillingene til din egen smak og laste ned temaet. Din nedlasting vil inkludere alle filene som er nødvendig for å for alle disse widgets å arbeide, og en demo-fil med dem alle på én side.

Faktisk kan disse pre-bygget tema tjene deg godt som utgangspunkt for en ny design. La oss manipulere et tema laste ned til en enkel nettside ved hjelp av faner og trekkspill.

Cleaning House

Vi kommer til å bruke kategoriene widgeten for våre hovedinnholdet delen av området, og trekkspill til sidepanelet. Et godt første skritt ville være å få mappen organiseres og deretter begynne å fjerne ekstra kode fra HTML og CSS-filer.

Jeg startet ut av re-navngi demo.html filen index.html og CSS-filen til style.css.

Så jeg fjernet all CSS fra CSS filen som hadde å gjøre med noe annet enn tappene og trekkspill. Det er mye ekstra cruft i standard CSS-filen, inkludert tilbakestilles på tonnevis av elementer som ikke virkelig trenger den hvis du bruker en global reset. Clean huset på vil her.

Gjør deretter det samme i HTML-filen, fjerne all kode som ikke er grunnleggende struktur eller deler av kategoriene eller trekkspill. Her er hva min side ser ut etter opprydding:

Struktur

Kategoriene gjør lurt å bruke som en hovedinnholdet område på et nettsted. Hver av kategoriene kan faktisk være et annet område av nettstedet. Først av alt, kan du pakke hele nettstedet i en div med id på side-wrap slik at vi kan center det og angi en fast bredde. Så siden begge kategoriene og trekkspill er allerede i innpakning div skjer, kan vi målrette dem med CSS, sette statisk bredder og flyte dem til hver side. Dette er hva CSS kan se slik ut:

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

Nå kategoriene tar på seg mer av en hovedinnhold utseende og trekkspill er som et sidepanel. Hver kategori kan fungere som en annen del av nettstedet, bare det er en veldig kul dynamisk måte å gjøre det siden switching sider krever ikke siden lastes i det hele tatt!

Her er hva min side ser ut etter en bit av omstilling:

Fleshing ut innhold

Let's get som standard innhold ut av det og starte plugging i våre egne ting. Vel, dette er fortsatt en demo så jeg skal la det meste av det Lorem Ipsum ting ... Men nå ta en titt etter at jeg kaste i et par grafikk og plugg litt mer realistisk innhold:

Final

Det hele området tok ca 20 minutter å kaste sammen. Det er ikke noe mesterverk på noen måte, men det er en god start på en hyggelig og rent utseende. Går å viser hvor raskt du kan få startet å bygge nettsider og også å ha kule dynamisk funksjonalitet gjennom jQuery og UI themeroller.

Se demo

LAST NED FILER