Hvordan lage seksjoner som kan utvides med HTML

May 18

Til tross for økende skjermstørrelser, "browser fast eiendom" - den tilgjengelige plassen for innholdet på websiden i et nettleservindu - fortsatt på en premie. Når du trenger å pakke en enkelt nettside full av innhold, plassere den lenger ned på siden er ikke alltid et akseptabelt svar, spesielt når innholdet er viktig informasjon. En løsning er å skape seksjoner som kan utvides. Denne teknikken presenterer brukere med et sett med overskrifter, hvert utvides med et klikk. Brukere komme til å lese det innholdet de ønsker, uten å rulle ned for å finne den, så du vil ikke miste lesere eller kunder fra ditt nettsted.

Bruksanvisning

1 Legg hver del innhold til websiden, innpakning hver i et par av "<div>" koder. Disse divs trenger ikke ID eller klasse navn, men hver trenger sin egen vei. Plasser hver seksjon er overskriften over sin "<div>" koder og gjøre hver overskrift klikkbare ved å plassere sin tekst i ankerkoder:

<H3> <a href="#"> Om oss </a> </ h3>
<Div>
Innhold går her ...
</ Div>

2 Pakk alle deler inne i et par av "<div>" tags og gi dem en ID navn:

Content goes here...

</ Div>
<H3> <a href="#"> Våre tjenester </a> </ h3>
<Div>

Content goes here...

</ Div>
</ Div>

3 Legg til følgende kode over avsluttende "</ body>" tag:

<Script src = "& lt; / script" rel = "nofollow" target = "_blank"> https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> & lt; / script>
<Script src = "& lt; / script" rel = "nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

Det første settet med "<script>" tags legger jQuery biblioteket til din webside, som er nødvendig for å kjøre jQuery brukergrensesnitt. Det andre settet med "<script>" tags legger jQuery UI biblioteket. Disse to librarires gjør det enkelt å skrive et skript som utvider seg og kollapser delene du har opprettet.

4 Legg et par nye "<script>" tags under de to du limt inn i. Mellom kodene, skrive et jQuery velger som er rettet mot ID navnet på hoved div som inneholder alle dine seksjoner som kan utvides. Tilføy til denne velgeren på "trekkspill ()" funksjon:

<Script>
$ ( "# Kollaps") trekkspill (.);
</ Script>

5 Opprett en ny linje i parentes etter "trekkspill." Legg inn en åpning klammeparentes etter åpningen parentes og en avsluttende klammeparentes før den avsluttende parentes. På den nye linjen, legge til "sammenlegg: true" slik at brukeren kan kollapse alle seksjoner.

<Script>
$ ( "# Kollaps"). Trekkspill ({
sammenlegg: true
});
</ Script>

Hint

Last ned jQuery UI bibliotek, sammen med sine pakket stilark, fra den offisielle nettsiden. Last opp alle filene til serveren din og link til en av sine stilark i din webside for å dra nytte av de pre-bygget stiler.