Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    aggiungere html ad una pagina

    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

  2. #2
    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.

  3. #3
    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

  4. #4
    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.
    codice:
    <ul id="laMiaLista">[*]Primo elemento[*]Secondo elemento[*]Terzo elemento[/list]
    Consideriamo che l'elemento "padre" (Parent) è UL e gli elementi figli (child) sono i tre LI.
    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:
    codice:
    var newLi=document.createElement("LI");
    Ora nella variabile newLI abbiamo un elemento elemento DOM di tipo 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".
    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 */
    }
    Spero di essere stato chiaro.

    Per quanto riguarda la creazione dell'XML voglio prima accertarmi che tu abbia appreso fino a qui

  5. #5
    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

  6. #6
    Perfetta intuizione!
    Il codice diverrebbe:
    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 */
    }
    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.
    Alla prossima

  7. #7
    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

  8. #8
    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

  9. #9
    Utente di HTML.it
    Registrato dal
    Oct 2007
    Messaggi
    4
    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!!!!!!

  10. #10
    Nell'ipotesi di avere questa struttura
    codice:
    <ul id="laMiaLista">Lista[*]Primo nodo[*]Secondo nodo[*]Terzo nodo[/list]
    e averla modificata tramite codice Javascript aggiungendo o rimuovendo nodi potremmo facilmente recuperare il contenuto della lista se questa è inserita in un altro contenitore.
    Ad esempio:
    codice:
    <div id="contenitore">
    <ul id="laMiaLista">Lista[*]Primo nodo[*]Secondo nodo[*]Terzo nodo[/list]
    </div>
    Andando a recuperare, difatti, il contenuto HTML del contenitore con
    codice:
    var ListaDaEsportare=document.getElementById("contenitore").innerHTML
    otterremmo il contenuto HTML della nostra lista, nodi e tag compresi.

    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.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.