Accentsconagua

Opprett et område med slick tabbed content ved hjelp av CSS & jQuery

Kode
Share

En av de største utfordringene for webdesignere er å finne måter å legge mye informasjon på en side uten å miste brukbarheten. Tabbed-innhold er en fin måte å håndtere dette problemet på, og har blitt brukt mye på blogger nylig. I dag skal vi bygge en enkel liten tabbinformasjonsboks i HTML, og få den til å fungere ved hjelp av noen enkle Javascript, og til slutt vil vi oppnå det samme ved hjelp av jQuery-biblioteket.

Trinn 1

Første ting først, vi trenger noe som ser fantastisk ut. Så en rask tur til Photoshop og Voila vi har en fin mockup av hva vår tabbed komponent skal se ut. Det er ganske rett frem med noen ekstra gradienter for å gjøre det nettopp fantastisk. Du kan ta tak i Photoshop PSD-filen for dette bildet hvis du vil ta en nærmere titt, men det er ganske enkelt, og vi kan bygge den av den felle JPG virkelig.

Steg 2

Det første du må gjøre når du bygger selvfølgelig, er å få en grov ide om hvordan du skal gjøre det. Dette blir lettere jo flere ting du har utviklet. Ser på dette bildet vil jeg si det beste å gjøre er:

  1. Ha en beholder
    som vi plasserer alt inne i. På den måten hvis vi trengte å plassere boksen vår eller slippe den inn i et sidebar, kan vi bare ta tak i alt pakket inn i
    og kopier + lim det inn et sted.
  2. Da har vi overskriftsområdet, sannsynligvis med en stikkord
  3. Så under det får vi et sekund
    tag som vil holde fanene og innholdet. Dette er den mørkegrå boksen i bildet.
  4. Så inne der bruker vi en uordnet liste

Så å oppsummere, vil det være noe slikt:

Ikke bekymre deg hvis du ser på det bildet, får du ikke umiddelbart å tenke på den strukturen. Noen ganger trenger du bare å gjøre ting ved prøving og feiling. I mitt tilfelle har jeg laget disse små tabbedtingene noen ganger, og jeg vet at dette er en fin enkel måte å lage dem på.

Også det er fint å tenke på strukturen som dette før du har mange klassenavn og -innhold og innhold fordi det kan bli vanskelig å se skogen fra trærne senere. Spesielt når du legger til innholdet for alle de forskjellige kategoriene.

Så nå som vi har et bilde i tankene om hvordan vi bygger vår struktur, la oss få tak i det!

Trinn 3

Nå, hvis du har fulgt mine opplæringsprogrammer på PSDTUTS, vet du at jeg elsker en god gradientbakgrunn. Så før vi begynner med tabbestrukturen, la oss få en fin bakgrunn!

Åpne Photoshop, opprett et dokument på 1000px x 1000px og tegne en fin (subtil) radialgradient som den som er vist nedenfor. Merk at jeg har trukket ut fra midten / toppen og sørget for at graden er ferdig når jeg kommer til kanten av dokumentet. Det betyr at jeg kan sette bakgrunnsfargen i HTML for å være den mørkere fargen, og hvis noen strekker nettleservinduet, blir det sømløst.

Trinn 4

Så opprett en ny katalog for prosjektet, og opprett deretter en annen katalog inni det som heter Bilder og lagre bildet i som background.jpg. Når du sparer bruk Fil> Lagre for web og enheter og velg JPG med en kvalitetsinnstilling på ca 70. Det kommer ut til en filstørrelse på 16kb som ikke er så ille. Det pleide å være en tid hvor du virkelig måtte scrimp og lagre, men nå vil du bare sørge for at du ikke blir dumt sløs med filstørrelsene dine.

Nå lager vi et HTML-dokument og skriver inn noen kode:

    Tabbed Structure - Regular

Så det vil være grunnlaget for vår HTML. Nå skal vi opprette style.css dokument og skriv i følgende:

 kropp bakgrunnsbilde: url (bilder / bakgrunn.jpg); background-repeat: no-repeat; bakgrunnsposisjon: toppsenter; background-color: # 657077; margin: 40px;

Et par ting å merke seg her:

  1. Det er mulig å skrive dette samme CSS ved hjelp av stenografi og redusere antall linjer som brukes, men det er mye tydeligere på denne måten og bedre for opplæring!
  2. Vi har et bakgrunnsbilde (gradienten) og vi har satt den til å ikke gjenta, fordi vi bare vil at den skal vises en gang, den er sentrert og til slutt er bakgrunnsfargen (# 657077) den mørkere fargen.
  3. Jeg har lagt til en margin på 40px. Dette er bare for å plassere mine ting senere, slik at det ser bra ut.

Du kan se det resulterende HTML-dokumentet her. Merk at hvis du endrer størrelsen på vinduet ditt, er det en fin sømløs uteksaminert bakgrunn. Wunderbar!

Trinn 5

Deretter legger vi til vår struktur på siden, slik at vi kan begynne å utforme den.

    Tabbed Structure - Regular

Så som du kan se, har jeg i utgangspunktet brukt samme struktur som jeg nevnte i trinn 2. Jeg har lagt til noen ids og klasser og noe faktisk innhold. Her er begrunnelsen bak det jeg har gjort:

  1. For overskriften har jeg plassert underteksten "Velg en fane" i en element. Dette lar meg bruke

    element for total posisjonering og element for å restylle og plassere underteksten.

  2. Beholderen
    har en id = "tabbed_box_1" og a class = "tabbed_box". Jeg har gjort dette fordi vi kan bruke denne koden flere ganger på samme side. Hvis vi gjorde det, kunne vi bruke ID-ene til å plassere hver på forskjellige steder. Men vi vil fortsatt ha klassen til å gjøre stylingen. Mens hvis vi skulle bruke id for styling, ville vi ende opp med å definere de samme stilene igjen og igjen for forskjellige id'er.
  3. Jeg har gitt linker og innholdsområder id fordi vi må bruke Javascript for å manipulere dem senere.
  4. Endelig har jeg gitt
      element et klassenavn Faktisk kunne vi style det uten en klasse bare ved styling .tabbed_area ul men dette kan bli forvirret med fremtiden
        Vi setter oss inn i innholdsområdet. Så det er bedre for det å ha et klassenavn for oss å referere til.

OK så uten stiler ser det egentlig ikke ut som mye ... enda!

Trinn 6

Nå med styling opp elementer, synes jeg det er best å jobbe fra utsiden av elementet. Så vi starter med dette elementet -

- som vi vil bruke til å plassere boksen pent i midten av dokumentet vårt ved hjelp av denne koden: 

 #tabbed_box margin: 0px auto 0px auto; bredde: 300 piksler;

Trinn 7

Nå skal vi gjøre overskriftsområdet. Vi kan stile overskriften slik:

 .tabbed_box h4 font-family: Arial, Helvetica, sans-serif; font-size: 23 pikslene; color: # ffffff; brev-Avstand: -1px; margin-bottom: 10px;  .tabbed_box h4 small color: # e3e9ec; font-vekt: normal; font-size: 9px; font-familie: Verdana, Arial, Helvetica, sans-serif; text-transform: store bokstaver; stilling: i forhold; top: -4px; venstre: 6px; brev-Avstand: 0px;

Et par ting å merke seg her:

  1. I stedet for bare å definere stiler for h4, har jeg definert for .tabbed_box h4. Dette er viktig i et større HTML-dokument fordi du kanskje har en annen h4-stil et annet sted. Så du vil sørge for at du ikke overlapper eller forårsaker fremtidige overlappingsproblemer.
  2. Du vil legge merke til at jeg også har justert bunnlinjen på h4 til 10px. Dette er slik at avstanden ser riktig ut. Det er viktig å vite at mange elementer har standardverdier. For eksempel har en h4 allerede en bunnmargin, og den er større enn vi ønsker. Så hvis vi ikke satte dette selv, ville det virke med en større margin. Noen bruker spesielle stilark som nullstiller alle disse standardverdiene, men jeg har blitt vant til å tilbakestille dem individuelt når jeg trenger å.
  3. Du ser at jeg også har brukt tekstomformingsattributtet til å gjøre den lille teksten alle hovedsteder. Vi kunne selvfølgelig bare ha skrevet det i caps, men jeg liker bare å gjøre det på denne måten!
  4. Du vil også legge merke til i den lille definisjonen, jeg har gitt den en posisjon: Relativ definisjon, dette er slik at jeg kan justere hvor den vises, flytte den opp 4px til toppen og 6px til høyre.
  5. Endelig når jeg stylte h4-elementet, ga jeg det negativt brevavstand, men det betyr at det lille elementet får samme negative brevavstand som vi ikke vil ha. Så jeg må definere den igjen som 0px der. Dette er takket være det faktum at stilarter kaskader ned - derav navnet Cascading Style Sheets. Ofte vil du legge merke til at noe ser merkelig ut på siden din, og det vil være fordi elementet har arvet litt stil du helt glemte. Da jeg først gjorde denne typen styling stirret jeg på den lille tiden i årevis og prøvde å finne ut hvorfor det så så bunket opp, til jeg husket!

Trinn 8

Neste gir vi vårt indre

litt styling med denne koden:

 .tabbed_area border: 1px solid # 494e52; background-color: # 636d76; padding: 8 piksler;

Dette gir bare litt av definisjonen og plasserer det indre elementet vekk fra sidene. Du kan se hvor vi står oppe på bildet nedenfor.

Ved å jobbe fra utsiden i, har vi gitt elementet vårt litt form, og det er mye lettere å se hvordan det kommer til å se ut. Også ofte vil du ha begrensninger som kommer fra utsiden, for eksempel kan boksen kanskje trenge inn i en kolonne av viss bredde. Endelig er det også en god ide å gå ut i, fordi det er en hvilken som helst stil arv er tydelig. For eksempel hvis du gikk den andre veien og gjorde de indre elementene først, senere stiler kan påvirke de indre elementene, og du må gå tilbake og justere allikevel.

Trinn 9

Nå kommer vi til de gode greiene - fanene! Hvis vi legger til dette lille stykket CSS, vil vi gå langt for å få kategoriene til å se ut som faner:

 ul.tabs margin: 0px; padding: 0 px;  ul.tabs li listestil: none; display: inline;

Denne koden sier at

×