Come faccio a impostare output HTML per impaginare?

May 19

Ogni volta che la pagina Web richiede una nuova pagina da un server Web, gli utenti devono attendere che appaia la nuova pagina. Se l'applicazione Web ha bisogno di visualizzare più pagine, non c'è bisogno di utilizzare più finestre del browser per eseguire questa operazione. Utilizzando paginazione in modo creativo, è possibile causare diverse versioni del vostro output HTML per apparire quando gli utenti fanno clic i collegamenti differenti sulla vostra pagina web. Questa tecnica rende anche il contenuto visualizzato più velocemente perché i browser non devono comunicare con i server Web per recuperare nuovi contenuti pagina.

istruzione

1 Aggiungere il seguente codice alla sezione del corpo di uno dei tuoi documenti HTML:

<Div id = "MIAPAGINA1" class = "hidePage">
Page 1 Indice
</ Div>
<Div id = "myPage2" class = "hidePage">
Page 2 INDICE
</ Div>

Questo codice crea due div che fanno riferimento a una classe CSS di nome hidePage. Il primo div contiene le parole "Pagina 1 contenuti," e la seconda div visualizza le parole "Pagina 2 contenuti." Sostituire quelle parole, se si preferisce, con altri elementi come immagini, pulsanti o menu.

2 Aggiungere il codice riportato di seguito per la sezione testa del documento:

seguente codice alla sezione del corpo di uno dei tuoi documenti HTML:
<Style type = "text / css">
.hidePage {display: none;}
</ Style>

Questa dichiarazione foglio di stile crea la classe hidePage che il referernce div. Il display del classe: attributo nessuno fa div invisibile quando la pagina Web carichi.

3 Incollare il seguente codice nella sezione body del documento sotto i div creati nel passaggio precedente.

<Div id = "pageLinks">
<a href="#" onclick="return showPage('myPage1')"> Pagina 1 </a>
<a href="#" onclick="return showPage('myPage2')"> Pagina 2 </a>
</ Div>

Questo codice crea un menu collegamento ipertestuale che contiene due inchiostri. Ogni link chiama una funzione JavaScript denominato showpage e passa l'ID del div associato a tale collegamento.

4 Aggiungere il codice riportato di seguito per la sezione di script del documento:

Funzione showpage (ID pagina) {
var pageCount = 2;

for (var i = 1; i <pageCount + 1; i ++)
{
var PageObject = "myPage" + i;
document.getElementById (PageObject) .style.display = "none";
}

document.getElementById (pageID) .style.display = "blocco";
}

Questa funzione accetta l'ID del div che contiene il contenuto della pagina che si desidera visualizzare. La variabile pageCount contiene il numero di pagine definite nella sezione corpo del documento. Il ciclo "per" che segue, loop attraverso ogni div il cui nome inizia con "myPage" e imposta il suo attributo di visualizzazione a "nessuno". Questo nasconde il div. La dichiarazione finale imposta l'attributo di visualizzazione del div che si desidera visualizzare a "blocco". Questo valore rende il div visibile.

5 Salva questo documento e visualizzarlo in un browser. Fare clic su uno dei link che appaiono nel menu di collegamento ipertestuale per visualizzare il contenuto della pagina associati al collegamento selezionato.

Consigli e avvertenze

  • Quando avete bisogno di più pagine, aggiungere ulteriori collegamenti al menu collegamento ipertestuale e più div alla sezione di codice che contiene i due div esistenti. Se si cambia "myPage" per un'altra parola, cambiarlo in tutti i punti del codice. Aggiornare il valore memorizzato in pageCount in modo che rifletta il numero di link nel menu di collegamento ipertestuale.