Nonostante l'aumento delle dimensioni dello schermo, "browser immobiliare" - lo spazio disponibile per il contenuto della pagina Web in una finestra del browser - rimane ad un premio. Quando è necessario per il confezionamento di una singola pagina web ricca di contenuti, posizionandolo più in basso nella pagina non è sempre una risposta accettabile, soprattutto quando che il contenuto è informazioni importanti. Una soluzione è la creazione di sezioni espandibili. Questa tecnica presenta agli utenti con una serie di intestazioni, ciascuno espandibile con un clic. Gli utenti ottengono leggere il contenuto che vogliono senza scorrendo verso il basso per trovare, in modo da non perdere i lettori o clienti dal tuo sito web.

istruzione

1 Aggiungere il contenuto di ogni sezione alla pagina Web, avvolgendo ciascuna in un paio di "<div>" tag. Queste div non hanno bisogno di nomi di ID o di classe, ma ognuno fa bisogno la propria voce. Mettere intestazione di ogni sezione di sopra dei suoi "<div>" tag e rendere ogni voce cliccabile posizionando il suo testo all'interno di tag di ancoraggio:

<H3> <a href="#"> Chi siamo </a> </ h3>
<Div>
Contenuto va qui ...
</ Div>

2 Avvolgere tutte le sezioni all'interno di una coppia di "<div>" tag e dare loro un nome ID:

<Div id = "espandibile">
<H3> <a href="#"> Chi siamo </a> </ h3>
<Div>

Content goes here...

</ Div>
<H3> <a href="#"> nostri servizi </a> </ h3>
<Div>

Content goes here...

</ Div>
</ Div>

3 Aggiungere il seguente codice al di sopra della chiusura "</ body>" tag:

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

La prima serie di "<script>" tag aggiunge la libreria jQuery per la pagina Web, che è necessario eseguire jQuery User Interface. La seconda serie di "<script>" tag aggiunge la libreria jQuery UI. Questi due librarires rendono facile scrivere uno script che si espande e comprime le sezioni create.

4 Aggiungere un nuovo paio di "<script>" tag sotto i due si è incollato a. Tra i tag, scrivere un selettore jQuery che gli obiettivi del nome ID del div principale che contiene tutte le sezioni espandibili. Aggiunge a questo selettore della "fisarmonica ()" la funzione:

<Script>
$ ( "# Collasso") accordion ().;
</ Script>

5 Creare una nuova linea all'interno delle parentesi dopo "a fisarmonica". Inserire un parentesi graffa di apertura dopo le parentesi di apertura e una parentesi graffa chiusura prima della parentesi di chiusura. Sulla nuova linea, aggiungere "pieghevole: true" in modo che l'utente può crollare tutte le sezioni.

<Script>
$ ( "# Collasso"). Accordion ({
pieghevole: true
});
</ Script>

Consigli e avvertenze

• Scarica la libreria jQuery UI, insieme con i suoi fogli di stile confezionati, dal sito ufficiale. Carica tutti i file sul server e il link ad uno dei suoi fogli di stile nella pagina Web di approfittare degli stili pre-costruiti.