Script ajax: Aggiungere elementi a una pagina web con scriptaculous

difficoltà:

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.

Social:

Donazione:

Se questo script ti grave; stato utile e ti ho fatto risparmiare tempo e denaro fai una qualsiasi cifra è ben accetta! 1€, 3€, 5€ ,10€, 50€ ;-) fai te!