March 19
siti web dinamici reagiscono all'input dell'utente e cambiare il contenuto della pagina. Diversi linguaggi di scripting possono ottenere questo effetto. Uno dei più facili e più popolare da usare è JavaScript. Esso consente di modificare il contenuto di elementi in HTML, come DIV (contenitori di contenuti), sulla base di un'azione, ad esempio facendo clic su o in bilico un mouse. Un clic del mouse è possibile creare un nuovo div all'interno di uno esistente, generando contenuti correlati al pulsante premuto. Seguire a pochi passi per ottenere questo effetto.
1 Creare un div tra i tag body della pagina Web, e dare il div un ID di "vecchia div." creare anche un pulsante per gli utenti a fare clic che attiva la funzione JavaScript "newInnerDiv." Il codice apparirà come segue:
<Body>
<Div id = "oldDiv">
</ Div>
<= Tipo di pulsante class = "tasto" "pulsante" onclick = "newInnerDiv ()"> Aggiungi Div </ button>
</ Body>
2 Creare la funzione "newInnerDiv" tra i tag head del documento. La funzione ottiene la div esistente dal suo ID di "oldDiv," crea un nuovo elemento div, crea un nuovo elemento p (n) e crea una stringa di testo di "Hi" per posizionare all'interno dell'elemento p. Si aggiunge il vecchio div con il nuovo elemento div, imposta l'ID del nuovo div a "nuovoDiv," aggiunge il nuovo div con il nuovo elemento p e aggiunge il nuovo elemento p con la nuova stringa di testo di "Hi".
Aggiungere un test all'inizio della funzione per verificare se questo div già stato creato quando l'utente facendo clic sul pulsante. Non c'è bisogno di creare più div. Un semplice test per questo esempio sta contando come esistono molti div. Se i numeri di div attualmente nella pagina uguale a 1, il codice viene eseguito:
<Script type = "text / javascript">
funzione newInnerDiv () {
var checkDiv = document.getElementsByTagName ( "div");
var divNumber = (checkDiv.length);
if (divNumber == 1) {
var changeContent = document.getElementById ( "oldDiv");
var addDiv = document.createElement ( "div");
var newPara = document.createElement ( "p");
var = newText document.createTextNode ( "Ciao");
changeContent.appendChild (addDiv);
addDiv.setAttribute ( "id", "nuovoDiv");
addDiv.appendChild (newPara);
newPara.appendChild (newText);}
}
</ Script>
3 Aggiungere alcuni stili sia per div tra i tag head in modo che il div sono facili da vedere quando il test della funzione. Fare il vecchio div rosso e il nuovo div più piccolo e giallo. Gettare in alcuni imbottitura per gli elementi dei pulsanti e p, se lo si desidera:
<Style type = "text / css">
oldDiv {width: 200px; height: 90px; border: sottile nero solido; padding: 0 5px 5px 5px; background-color: red; position: relative; } NuovoDiv {background-color: yellow; width: 180px; margin: 10px; position: absolute; }
apri un {margin: 20px 0 0 0; }
p {position: relative; float: left; padding: 10px; }
</ Style>
4 Salvare la pagina e aprirlo in un browser Web. Viene visualizzata una rosso, scatola vuota. Fare clic sul pulsante, e la nuova div è generato, indicato dal suo colore giallo e il suo testo di "Hi". Visualizza il "codice generato fonte," se disponibile sul browser, per vedere il nuovo div e il suo contenuto all'interno del vecchio div nel codice HTML.
Il codice completo è la seguente:
<Html>
<Head>
<Style type = "text / css">
oldDiv {width: 200px; height: 90px; border: sottile nero solido; padding: 0 5px 5px 5px; background-color: red; position: relative; } NuovoDiv {background-color: yellow; width: 180px; margin: 10px; position: absolute; }
apri un {margin: 20px 0 0 0; }
p {position: relative; float: left; padding: 10px; }
</ Style>
<Script type = "text / javascript">
funzione newInnerDiv () {
var checkDiv = document.getElementsByTagName ( "div");
var divNumber = (checkDiv.length);
if (divNumber == 1) {
var changeContent = document.getElementById ( "oldDiv");
var addDiv = document.createElement ( "div");
var newPara = document.createElement ( "p");
var = newText document.createTextNode ( "Ciao");
changeContent.appendChild (addDiv);
addDiv.setAttribute ( "id", "nuovoDiv");
addDiv.appendChild (newPara);
newPara.appendChild (newText);}
}
</ Script>
</ Head>
<Body>
<Div id = "oldDiv">
</ Div>
<= Tipo di pulsante class = "tasto" "pulsante" onclick = "newInnerDiv ()"> Aggiungi Div </ button>
</ Body>
</ Html>