Script.Aculo.Us

Demonstration

Appliquer des effets spéciaux

function tester1()
{
	new Effect.toggle('div_1','blind');
}

On va diminuer la transparence du calque (mais on peut aussi le faire dans l'autre sens) :

function tester2()
{
	new Effect.Opacity('div_2', {duration:2, fps:25, from:1.0, to:0.0});
}

function tester3()
{
	new Effect.MoveBy('div_3', -50, 200, {duration:3, fps:25, from:0.0, to:1.0});
}

function tester4()
{
	new Effect.Scale('div_4', 0, {duration:1, fps:25, from:1.0, to:0.0});
}

function tester5()
{
	new Effect.Highlight('div_5', 
	{duration:1, fps:25, from:0.0, to:1.0, startcolor:'#ff0000', endcolor:'#00ff00', restorecolor:'#0000ff'});
}

function tester6()
{
	new Effect.Puff('div_6');
}

function tester7()
{
	new Effect.Shake('div_7');
}

function tester8()
{
	new Effect.Pulsate('div_8');
}

Rendre une element du DOM déplaçable par Drag and Drop

Cliquez sur "Tester 9" et cliquez-déplacer-déposer le calque :

function tester9()
{
	new Draggable('div_9');
}

Changer l'ordre d'une liste à puce par Drag and Drop

CLiquez sur "Tester 10" et cliquez-glissez les élément de la liste :

• Element 1
• Element 2
• Element 3
• Element 4
• Element 5

function tester10()
{
	Sortable.create('maListe');
}

Utiliser une liste déroulante à autocompletion de texte via AJAX

Cliquez sur "Tester 11".
Puis, saisissez dans le champ a lettre "y" ou "f".

function tester11()
{
	new Ajax.Autocompleter("monChamp", "monDiv", "fluxAutocompletion01.php");
}

Voici le script PHP du fichier "fluxAutocompletion01.php" :

<?
	if (substr($_REQUEST['motCle'],0,1) == "y")
	{
?>
		<ul>
		    <li>yoda</li>
		    <li>youssef</li>
		    <li>yodel</li>
		</ul>
<?
	}
	else if (substr($_REQUEST['motCle'],0,1) == "f")
	{
?>
		<ul>
		    <li>fabien</li>
		    <li>fabrice</li>
		    <li>françois</li>
		</ul>
<?
	}
?>

Bien-sûr, ce script n'a pas vraiment d'utilité, c'est juste pour la démo.
La réelle utilité est d'extraire des données d'une base de données est de générer les listes à puces.
Voici un exemple de requête SQL en PHP qui permet de récupérer tous les noms de clients dont le nom commence par la chaine de caractères saisie par l'internaute :

<?
	$sql = "SELECT * FROM client WHERE nom LIKE '".$_REQUEST['motCle']."%'";
?>

Utiliser une zone de texte editable via AJAX

Cliquez sur "Tester 12".
Puis, modifier le texte :

function tester12()
{
	new Ajax.InPlaceEditor("div_12", "enregistrerBaseDeDonnees.php")
}

Voici le script du fichier "enregistrerBaseDeDonnees.php" :

<!-- 
Ici, on insère un script (php par exemple) qui permet de modifier l'info en base de données.
Puis, on affiche le texte qui va rafraichir la zone éditable.
-->
<?= $_POST['value']; ?>

Créer un "slider"

Cliquez sur "Tester 13" et déplacer le calque rouge :

function tester13()
{
	new Control.Slider('div_14','div_13',{
	onSlide:function(v){$('div_15').innerHTML='glissement => '+v},
	onChange:function(v){$('div_15').innerHTML='lacher => '+v}});
}

Manipuler simplement le DOM

function tester14()
{
	var titre = Builder.node("h1", "Scriptaculous");
	alert(titre);
	document.getElementById("div_16").appendChild(titre);
	
	var titre = Builder.node("h1", {title:'coucou',style:'color:#ff0000;'}, "Script.aculo.us");
	alert(titre);
	document.getElementById("div_16").appendChild(titre);	
}

2012 © Développeur web