| Precedente :: Successivo |
| Autore |
Messaggio |
sevenjeak
Semidio
Registrato: 04/02/08 22:05
Messaggi: 308
Residenza: Roma
|
 Inviato: 21 Lug 2009 20:12 Oggetto: * [JS] Impostare un elemento nella pagina |
 |
|
Salve.
Non so che già ho scritto una discussione di questo genere, cmq volevo sapere che con javascript e possibile fare queste cose:
1. Creare un'insieme di elementi <li> per un menù e inserirli all'interno del body.
2. Permettere ad un sotto-menù di aprirsi con un effetto.
3. Eliminare elementi dalla pagina.
E' possibile fare ciò? |
|
| Top |
|
 |
freemind
Supervisor sezione Programmazione
Registrato: 04/04/07 21:28
Messaggi: 4643
Residenza: Internet
|
| Inviato: 21 Lug 2009 22:31 Oggetto: |
|
|
La risposta è sì a tutte e 3 le domande.
Puoi usare javascript terra terra ma è meglio passare attraverso un framework tipo jquery, extjs, mojo etc... perchè permettono di scrivere codice molto più velocemente soprattutto quando devi lavora con insiemi massicci di nodi sul dom.
Ora son di volata, magari domani ti posto qualche cosa.
Qui introduco extjs e faccio qualche esempio su come interagire con il dom passando anche dalle query xpath. |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 22:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 22 Lug 2009 19:54 Oggetto: |
|
|
| ok, anchio ora non ho tempo, aspetto il tuo prossimo post |
|
| Top |
|
|
freemind
Supervisor sezione Programmazione
Registrato: 04/04/07 21:28
Messaggi: 4643
Residenza: Internet
|
| Inviato: 23 Lug 2009 11:41 Oggetto: |
|
|
Ciao,
velocemente ti posto un esempio di come usare extjs per aggiungere a runtime un elemento <li> ad un <ul>.
Prima il codice della paginetta di prova:
| Codice: |
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<!-- extjs -->
<script type="text/javascript" src="../lib/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext-2.2/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady
(
function()
{
Ext.get('cmd').on('click',function()
{
Ext.DomHelper.append('list',
{
tag: 'li'
,cls: 'voce'
,html: 'Nuovo li'
});
});
}
,window
);
</script>
</head>
<body>
<p>Qui sotto verrà composta la lista</p>
<div style="width:200px;height:300px; border-style: solid; border-width: 1px; border-color: #000000">
<ul id="list">
</ul>
</div>
<br/><input type="button" id="cmd" value="Aggiungi li"/>
</body>
</html>
|
Nel link che ti avevo postato prima c'è lo spiegone del funzionamento che riassumo qui.
Noi dobbiamo operare quando il documento ha finito di caricarsi per evitare di provare ad accedere a dei nodi che non esistono ancora.
il codice:
| Codice: |
Ext.onReady(function()
{
...
},window);
|
in pratica significa: "quando il documento si è caricato esegui questa funzione (quella dichiarata inline) nello scope dell'oggetto window.
Tramite Ext.get(id) preleviamo il nodo con id "id". Nel nostro caso vogliamo associare al click del bottone un handler quindi:
| Codice: |
...
Ext.get('cmd').on('click',function()
...
{});
|
significa: "prendi l'elemento con id "cmd" (il nostro bottone) e all'evento click esegui questa funzione (quella inline).
Tramite l'oggetto Ext.DomHelper possiamo agire "a basso livello sul dom".
Per aggiungere un figlio ad un elemento possiamo usare il metodo append che riceve come primo parametro il parent (nel nostro caso <ul>) e come secondo una stringa o un oggetto json che descrive il nuovo nodo.
Nel mio caso ho usato json.
Quindi:
| Codice: |
Ext.DomHelper.append('list',
{
tag: 'li'
,cls: 'voce'
,html: 'Nuovo li'
});
|
sto dicendo: "aggiungi un nuovo figlio a "list" (elemento di id "list") e questo figlio è: un li, con classe "voce" e html (innerHTML) "Nuovo li".
Se esegui la paginetta vedrai che ad ogni click verrà aggiunta una voce.
Puoi anche provare a sostituire la funzione passata come parametro a Ext.onReady() con:
| Codice: |
Ext.get('cmd').on('click',function()
{
// questo elemento è la lista
var list=Ext.get('list')
// creo un nuovo Ext.Element così posso usare il framework senza problemi
var el=new Ext.Element(document.createElement('li'));
el.addClass('voce');
// qui aggiorno di fatto l'innerHTML del nodo
el.update('Nuovo li');
// aggiungo la voce alla lista
list.appendChild(el);
});
|
Questa fa esattamente la stessa cosa solo che la creazione degli li avviene usando Ext.Element che è l'astrazione di extjs verso i nodi.
La chiamata el.update modifica con il parametro passato l'innerHTML dell'elemento el.
Ho aggiunto una classe "voce" ai vari li perchè nel caso si decidesse di agire in modo globale su questi li potremmo recuperare tutti gli li, agganciarli in un colpo solo uno o più handler per i vari eventi; insomma potremmo agire sull'insieme degli li invece che su un li alla volta.
Ti rimando al link dell'altro post per vedere dove recuperare la libreria extjs. |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 22:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 23 Lug 2009 13:20 Oggetto: |
|
|
Nel frattempo ho provato ha vedere se mi la pagine test.html che tu hai postato qui:
http://forum.zeusnews.com/viewtopic.php?t=41200
Io ho usato la ext JS-3.0.0 e ho modificato tutti i percorsi url con i percorsi che ho io, ho provato cosi:
| Codice: |
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/lib/ext-3.0.0/resources/css/ext-all.css" />
<title>Test!</title>
<!-- core di extjs e js specifici -->
<script type="text/javascript" src="/lib/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/lib/ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady
(
function()
{
var win=new Ext.Window
(
{
title: 'Test!',
border: true,
resizable: true,
closable: true,
shadow: false,
items:
[
{
'html': 'Questa è una finestra di prova!'
}
]
}
);
win.show();
},
</script>
</head>
<body>
</body>
</html>
|
Ma nn funziona, come mai? |
|
| Top |
|
|
freemind
Supervisor sezione Programmazione
Registrato: 04/04/07 21:28
Messaggi: 4643
Residenza: Internet
|
| Inviato: 23 Lug 2009 14:01 Oggetto: |
|
|
Nella lezione davo per scontato che il tutto venisse fatto girare con un web server.
Devi usare i percorsi relativi oppure assoluti ma riferiti alla dir reale in cui hai messo il tutto.
Se la tua struttura del progetto è:
| Codice: |
progetto
--lib
----le cose di extjs
--test.html
|
dentro a test.html i percorso verso la libreria devono diventare:
| Codice: |
lib/ext-3.0.0/resources/css/ext-all.css
lib/ext-3.0.0/adapter/ext/ext-base.js
lib/ext-3.0.0/ext-all-debug.js
|
|
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 22:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 23 Lug 2009 14:15 Oggetto: |
|
|
| Cambiando i percorsi non mi va lo stesso |
|
| Top |
|
|
freemind
Supervisor sezione Programmazione
Registrato: 04/04/07 21:28
Messaggi: 4643
Residenza: Internet
|
| Inviato: 23 Lug 2009 14:35 Oggetto: |
|
|
Di preciso che cosa succede?
Non vedi proprio nulla?
Se usi firefox non è che ti installi firebug così proviamo a debuggare? |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 22:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 23 Lug 2009 14:55 Oggetto: |
|
|
Ho installato firebug, nella scheda console mi da un errore di sintassi.
Si può vedere anche in che riga è l'errore?
EDIT:
Ho visto solo ora la riga, e nella riga 36, doce c'è il tag </script> |
|
| Top |
|
|
freemind
Supervisor sezione Programmazione
Registrato: 04/04/07 21:28
Messaggi: 4643
Residenza: Internet
|
| Inviato: 23 Lug 2009 18:11 Oggetto: |
|
|
Credo di aver trovato l'errore.
Dopo
manca
e in pratica dovresti ottenere una cosa come:
| Codice: |
Ext.onReady
(
function()
{
var win=new Ext.Window
(
{
title: 'Test!',
border: true,
resizable: true,
closable: true,
shadow: false,
items:
[
{
'html': 'Questa è una finestra di prova!'
}
]
}
);
win.show();
}
, window
);
|
così dovrebbe andare |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 22:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 24 Lug 2009 10:26 Oggetto: |
|
|
Mi restituisce questo messaggio di errore:
| Codice: |
Ext.onReady is not a function
http://localhost/Script/test.html
Line 35
|
|
|
| Top |
|
|
freemind
Supervisor sezione Programmazione
Registrato: 04/04/07 21:28
Messaggi: 4643
Residenza: Internet
|
| Inviato: 28 Lug 2009 21:50 Oggetto: |
 |
|
Secondo me sono agganciati male i file della libreria.
Il pacchetto della versione 3.0 contiene varie cose e per l'uso base servono i seguenti files (ipotizzando che il tutto sia nella dir "ext")
- ext/resources/css/ext-all.css
- ext/adapter/ext/ext-base.js
- ext/ext-all.js
inclusi nell'ordine che ti ho proposto.
Da quello che ho capito tu stai usando un webserver quindi occorre che il percorso abbia davanti la "/" per tutti e tre i files |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
