Script ajax: Aggiungere elementi a una pagina web con scriptaculous

   difficoltà:  script script script script script

Demo
Download
Script simili
9/1/2007


Questo post è un elemento che ci consentirà in seguito di migliorare Drag and drop con scriptaculous e salvataggio posizione. In particolare vedremo come aggiungere dei box alle liste ordinabili. Abbiamo già visto come Aggiungere elementi a una pagina web con javascript, ora vediamo come puo' aiutarci la libreria script.aculo.us e in particolare l'oggetto builder di prototype.
Riprendiamo parte delle esempio di Drag and drop con scriptaculous e salvataggio posizione, leggermente semplificato. Per cui includiamo i file javascript della libreria script.aculo.us e il foglio di stile come nel precedente script.

La funzione chiave crea() utilizza l'elemento builder per creare il nuovo elemento. Vediamo la funzione:

function crea(elemento){
if(!$('obj'+elemento)){
newitem=Builder.node( 'li', {className:'item',id:'obj'+elemento}, [Builder.node( 'div', {className:'handle'},'titolo '+elemento)] );
$('firstlist').appendChild(newitem);
$('obj'+elemento).innerHTML=$('obj'+elemento).innerHTML+'contenuto '+elemento;
rendisortable();
}
}

if(!$('obj'+elemento)){}
Con la prima riga controllo se l'elemento esiste già. Se non esiste lo aggiungo.

newitem=Builder.node( 'li', {className:'item',id:'obj'},'contenuto');
Crea un nuovo elemento DIV a cui assegniamo la classe item e l'id obj. L'ultimo valore è il contenuto del DIV, che nel nostro caso sarà un'altro DIV.

$('firstlist').appendChild(newitem);
Appende(aggiunge) l'elemento all'oggetto firstlist.

$('obj'+elemento).innerHTML=$('obj'+elemento).innerHTML+'contenuto '+elemento;
rendisortable();
Aggiungo al contenitore un ulteriore contenuto HTML e richiamo la funzione rendisortable() che si occupa di rendere il contenitore ordinabile.

Ecco il codice completo:
<!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" xml:lang="en" lang="en">
<head>
<title>Script ajax: Aggiungere elementi a una pagina web con scriptaculous</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="ajax/prototype.js" type="text/javascript"></script>
<script src="ajax/scriptaculous.js" type="text/javascript"></script>
<script src="ajax/unittest.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<script>
function crea(elemento){
if(!$('obj'+elemento)){
newitem=Builder.node( 'li', {className:'item',id:'obj'+elemento}, [Builder.node( 'div', {className:'handle'},'titolo '+elemento)] );
$('firstlist').appendChild(newitem);
$('obj'+elemento).innerHTML=$('obj'+elemento).innerHTML+'contenuto '+elemento;
rendisortable();
}
}

function rendisortable(){
// <![CDATA[
Sortable.create("firstlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist"],constraint:false});

// ]]>
}
</script>
<body>

<a href="javascript:crea('1')">titolo 1</a> &nbsp;&nbsp;
<a href="javascript:crea('2')">titolo 2</a> &nbsp;&nbsp;
<a href="javascript:crea('3')">titolo 3</a> &nbsp;&nbsp;
<a href="javascript:crea('4')">titolo 4</a> &nbsp;&nbsp;
<a href="javascript:crea('5')">titolo 5</a> &nbsp;&nbsp;
<a href="javascript:crea('6')">titolo 6</a> &nbsp;&nbsp;
<a href="javascript:crea('7')">titolo 7</a> &nbsp;&nbsp;
<a href="javascript:crea('8')">titolo 8</a> &nbsp;&nbsp;
<a href="javascript:crea('9')">titolo 9</a> &nbsp;&nbsp;

<div class="container">
<div class="colonna">
<ul class="sortabledemo" id="firstlist">

</ul>
</div>
</div>

</body>
</html>
Il foglio di stile è sempre quello prelevabile qui: Drag and drop con scriptaculous.




Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.