Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: Hübsche Effekte mit Script.Aculo.Us



Ranking: +5   Kommentare: 4   |   Bewertung: Keine Berechtigung!  

Vorwort und Datei-Schubserei


In diesem kleinen Tutorial erkläre ich euch,wie Ihr einfach Effekte mit der Javascript-Bibliothek script.aculo.us erstellen könnt.
Dazu benötigt Ihr, logischerweise, die Bibliothek selber.Diese findet Ihr hier. Ladet euch die neueste Version , enpackt sie und kopiert die .js Dateien aus den Ordnern "lib" und "src" in den Ordner "js" in euren gewünschten Projektordner.

Script.aculo.us einbauen


Damit ihr Zugriff auf die Funktionen der Bibliothek habt, müst ihr natürlich in Eurer HTML Datein auf die Javascript-Dateien verweisen.Dabei ist zu beachten, das Ihr nicht alle braucht, sondern nur "scriptaculous.js" und "prototype.js". Der passenden HTML-Code, der in den Kopf eurer HTML-Datei kommt sieht so aus:

Code:


<script src="js/prototype.js" type="text/javascript"></script>

<script src="js/scriptaculous.js" type="text/javascript"></script>


Erster Effekt


Der erste Effekt, den ich hier erläutern möchte, ist appear. Dieser Effekt lässt ein Element langsam einblenden. Dazu brauchen wir ersteinmal ein Element, ich nehme für solche Zwecke gerne ein DIV:

Code:


<div id="zeigmich" style="background-color:#333333; display:none; color:#ffffff;height:200px;width:200px;">Noch ein bisschen Text</div>

So,nun werdet Ihr euch sicher wundern,warum ich das element per "display:none" ausgeblendet habe. Das hat ganz einfach den Zweck,das wir ja wollen,das es erscheint, und um zu erscheinen muss es ersteinmal weg sein. ;)
Nun müssen wir dafür sorgen, das das Element irgendwie eingeblendet wird. Dazu fügen wir darunter diesen code ein:

Code:


<a href="#" onClick="zeigediv()">DIV anzigen</a>

Dadurch erzeugen wir einen Link, der keinen wirklichen Verweis enthält, aber beim anklicken eine Javascript Funktion aufrufe,nämlich die Funktion "zeigediv". Damit nun auch etwas passiert, müssen wir definieren was diese Funktion tuen soll. Dazu brauchen wir wieder Javascript:

Code:


<script type="text/javascript">

function zeigediv(){

new Effect.Appear("zeigmich");}

</script>


Damit könnt Ihr nun einfach ein Element einblenden. Es gibt aber z.b. auch die Möglichkeit,das ganze leicht zu modifizieren:

Weiterbasteln


Jetzt bauen wir eine Funktion, die die Seite selber erst dann einblendet,wenn sie komplett geladen ist. Dazu verfügt das Element body über den Handler "onLoad".Ich setze her nun einmal den ganzen Code auf einmal rein:

Code:


<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>Untitled</title>

<script src="js/prototype.js" type="text/javascript"></script>

<script src="js/scriptaculous.js" type="text/javascript"></script>

<script type="text/javascript">

function loadappear(){

    new Effect.Appear("bodyid");

}

</script>

</head>

<body id="bodyid" style="display:none" onload="loadappear()">

<div id="zeigmich" style="background-color:#333333; color:#ffffff;height:200px;width:200px;">Noch ein bisschen Text</div>



</body>

</html>




Andere Effekte


Der Appear-Effekt ist zwar ganz nett,aber lange nicht alles was script.aculo.us kann. Es gibt einige andere Effekt,die Ihr einfach in der jeweiligen Funktion anstatt "appear" einsetzen könnt, probiert z.B. mal Shake, SlideDown und Highlight, wobei wichtig ist das bei Highlight und Shake das Objekt sichtbar ist ;)

Ich hoffe das eucht das Tut die Anfänge von Script.Aculo.Us etwas näher gebracht hat und ihr jetzt vll eine Idee habt,was man damit machen kann.Falls Ihr Fragen habt, einfach eine PM an mich, oder fragt im Forum.

Das hier ist das erste Tutorial von einigen über Effekte/AJAX, bald kommt warscheinlich eins über echtes Ajax,mit der Prototype-Blibliothek und PHP

Veröffentlicht von: ApocalypseT
Veröffentlicht am: 24 Jan. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: AJAX Effekte Prototype Script.aculo.us


Themenverwandte Tutorials


Kommentar(e) (4)


CrAc sagt:

hmm css im content -.-*
trenn doch ma Layout und inhalt :P

29 Jan. 2009 22:05:14 • Antworten


kev47137 sagt:

ich bin mir sicher das es nützlich ist aber hab irgendwas falsch gemacht obwohl es eigentlich gut erklärt ist

25 Jan. 2009 14:42:56 • Antworten


deleted_1300463630 sagt:

Sehr nützlich, gutes tutorial

10/10

14 Jun. 2008 14:28:09 • Antworten


ApocalypseT sagt:

Ich habe hier für alle die es nicht ganz hinkriegen o.ä. mal die 2 Beispiele in HTML.Einfach entpacke und die jeweilige Datei öffnen.
http://21studios.de/Scriptaculous_tutor ial_part1.zip

25 Jan. 2008 14:17:26 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder