ciao io voglio fare una pagine che ad ogni clic su un pulsante mi aggiunge un campo di un elenco puntato?
è possibile con javascript o devo usare server-side, o con ajax??????
grazie
ciao io voglio fare una pagine che ad ogni clic su un pulsante mi aggiunge un campo di un elenco puntato?
è possibile con javascript o devo usare server-side, o con ajax??????
grazie
FaBio
Dipende.
Se vuoi che la pagina venga staticamente modificata (cioè dopo il click e l'aggiunta di una voce all'elenco la pagina rimanga modificata) o se vuoi che la modifica sia temporanea.
Nel primo caso devi ricorrere a linguaggi server-side (ASP o PHP) nel secondo caso puoi andare a modificare il DOM.
Ti consiglio di reperire informazioni sulle tecniche di manipolazione del DOM.
Puoi creare, ad esempio un nuovo elemento LI ed "appenderlo" al "Parent" cioè l'UL padre.
mi puoi dare delle dritte su alcuni tutorial del DOm
ma DOM è un linguaggio o solo un tipo di approccio ???
in teoria io dovrei creare un menu dinamico cioè l'utente decide i campi e poi salvare il tutto in un xml??? hai dei consigli?
FaBio
Il DOM (DOcument Object Model) è un modello di documento.
Per maggiori informazioni ti consiglio di leggere HTML DOM Tutorial (in inglese, ma di facile comprensione) e Guida DOM.
Javascript è ormai maturo e ogni browser supporta la modifica del DOM (anche se con leggere modifiche e inesattezze soprattutto da parte di IE, ma molto è stato fatto con la versione 7).
Ti faccio un esempio.
Supponiamo di avere un elenco ordinato numerato.
Consideriamo che l'elemento "padre" (Parent) è UL e gli elementi figli (child) sono i tre LI.codice:<ul id="laMiaLista">[*]Primo elemento[*]Secondo elemento[*]Terzo elemento[/list]
Credo che fin qui non sia difficile, no?
Se volessi aggiungere un nuovo elemento LI (un altro elemento numerato nella lista).
Innanzitutto dovrei crearlo con:
Ora nella variabile newLI abbiamo un elemento elemento DOM di tipo LI.codice:var newLi=document.createElement("LI");
Possiamo creare la funzione da richiamare con un onclick di un qualunque tasto o elemento per aggiungere caratteristiche all'elemento e "appenderlo" a "laMiaLista".
Spero di essere stato chiaro.codice:var aggiungiLI = function(testoDaAggiungere){ var newLi=document.createElement("LI"); newLi.innerHTML=testoDaAggiungere; /*innerHTML inserisce codice HTML nell'elemento*/ newLi.style.border="1px solid green"; /*con style possiamo modificarne lo stile (altezza, larghezza, colore etc...)*/ /******************/ /*ora andiamo a prelevare l'elemento padre UL*/ myUL=document.getElementById("laMiaLista"); /*nella variabile myUL ci sara l'elemento padre*/ myUL.appendChild(newLI); /*"appendiamo" alla lista il nostro elemento */ }
Per quanto riguarda la creazione dell'XML voglio prima accertarmi che tu abbia appreso fino a qui
Grazie mille mi sei stato di grande aiuto, prima di parlare dell'xml vorrei fare un altra cosa cioè :
creando dimamicamente i miei LI non so come renderne attivo uno grazie ad un clic, questo mi servira per una possibile funzione cancella o per inserire figli dell'albero e non fratelli.
io mentre creo LI posso abbinare ad esso una funzione onclik()="rendiattivo()" ???
se si come?
grazie ancora ciao
FaBio
Perfetta intuizione!
Il codice diverrebbe:
anche se sarebbe meglio appendervi un elemento A a cui assegnare la funzione onclick, ma poi diventa troppo ricorsivo e complicato: per il momento penso sia sufficiente.codice:var aggiungiLI = function(testoDaAggiungere){ var newLi=document.createElement("LI"); newLi.innerHTML=testoDaAggiungere; /*innerHTML inserisce codice HTML nell'elemento*/ newLi.style.border="1px solid green"; /*con style possiamo modificarne lo stile (altezza, larghezza, colore etc...)*/ /********************/ /********************/ /********************/ /**qui la nostra funzione**/ /********************/ /********************/ /********************/ newLi.onclick=function(){ /*il codice da eseguire in caso di click*/ } /*ora andiamo a prelevare l'elemento padre UL*/ myUL=document.getElementById("laMiaLista"); /*nella variabile myUL ci sara l'elemento padre*/ myUL.appendChild(newLI); /*"appendiamo" alla lista il nostro elemento */ }
Alla prossima
andando avanti con il lavoro sono sorti un po di dubbi e problemi:
1) dopo aver creato un paio di LI mi posiziono su input text e do invio mi cancella tutto
2) per tenere conto dell'elemento attivo ho utilizzato un metodo molto elementare cioè mentre creo LI gli abbino (come mi hai fatto vedere tu) la funzione on click quindi , se clicco su un LI mi il testo di rosso e colora tutti gli altri LI di nero (non sono riuscito a colorare lo sfondo e quando creo dei sottorami non mi colora piu nulla)
c'è un altro metodo per tenere conto dell'elemento attivo?
intanto di faccio vedere il mio lavoro grazie in anticipo sei un dio
codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> <script language="javascript"> function aggiungi_nodo(){ if(document.miaForm.n_nodo.value!=""){ var newLi=document.createElement("LI"); newLi.innerHTML=document.miaForm.n_nodo.value; document.miaForm.n_nodo.value= ""; newLi.onclick=function(){ var lis=document.getElementsByTagName("li"); for(var i=0; i<lis.length; i++) lis[i].style.color="black"; newLi.style.color="red"; } var myUL=document.getElementById("root"); myUL.appendChild(newLi); } } function elimina_nodo(){ var attivo=cerca_attivo(); var r_nodo=attivo.parentNode; r_nodo.removeChild(attivo); } function cerca_attivo(){ var lis=document.getElementsByTagName("li"); for(var i=0; i<lis.length; i++) if(lis[i].style.color=="red") return lis[i]; } function aggiungi_figlio(){ if(document.miaForm.n_nodo.value!=""){ var newUl=document.createElement("UL"); var newLi=document.createElement("LI"); newLi.innerHTML=document.miaForm.n_nodo.value; document.miaForm.n_nodo.value= ""; newLi.onclick=function(){ var uls=document.getElementsByTagName("ul"); for(var i=0; i<uls.length; i++){ var lis=document.getElementsByTagName("li"); for(var j=0; j<lis.length; j++) uls[i].lis[j].style.color="black"; } newLi.style.color="red"; } var myRoot=cerca_attivo(); myRoot.appendChild(newUl); newUl.appendChild(newLi); } } </script> </head> <body > <div id="main"> <div id="left" class="main"> <ul id="root"> [/list] </div> <div id="center" class="main"> qui andranno le proprietà di ogni campo del menu </div> <div id="right" class="main"> <form name="miaForm"> <input type=text name="n_nodo"/> <input type="button" value="Add" onClick="aggiungi_nodo()"/> <input type="button" value="Delete" onClick="elimina_nodo()"/> <input type="button" value="Child" onClick="aggiungi_figlio()"/> <input type="button" value="Sibling" onClick="aggiungi_fratello()"/> </form> </div> </div> </body> </html>
FaBio
mi rispondo quasi da solo sulla domanda dell'elemento attivo all'interno del menu
ho visto sul sito che mi hai consigliato questo esempio ma non riesco bene a capire alcune cose che fa e poi ho provato a modificarlo ma nn va me lo puoi commentare tu che sei il mio guru ??
http://www.w3schools.com/js/tryit.as...ent_srcelement
FaBio
Ciao a tutti......avevo anche io lo stesso problema, cioè creare un file xml a partire da un menù ad albero fatto con javascript. Volevo sapere se esistono delle funzioni per fare il tutto o se devo scorrere l'albero e concatenare le stringhe in un file.
Grazie in anticipo!!!!!!
Nell'ipotesi di avere questa struttura
e averla modificata tramite codice Javascript aggiungendo o rimuovendo nodi potremmo facilmente recuperare il contenuto della lista se questa è inserita in un altro contenitore.codice:<ul id="laMiaLista">Lista[*]Primo nodo[*]Secondo nodo[*]Terzo nodo[/list]
Ad esempio:
Andando a recuperare, difatti, il contenuto HTML del contenitore concodice:<div id="contenitore"> <ul id="laMiaLista">Lista[*]Primo nodo[*]Secondo nodo[*]Terzo nodo[/list] </div>
otterremmo il contenuto HTML della nostra lista, nodi e tag compresi.codice:var ListaDaEsportare=document.getElementById("contenitore").innerHTML
Il problema sta nel salvataggio: anche aprendo una nuova finestra e modificandone il contenuto con Javascript all'atto di salvarla non otterremmo il risultato voluto poichè la modifica del DOM via Javascript non cambia il contenuto fisico del file.
Per ottenere ciò dovremmo ricorrere a PHP o ASP.