Colorscheme

Scriptaculous - 5 Minuten Speed Tutorial

Ich versuche das Scriptaculous-Tutorial so kurz wie möglich zu machen:

  1. Hier kann man sehen was man mit Scriptaculous machen kann: Scriptaculous-Beispiele
  2. aktuelle Version (current version) herunterladen: Download
  3. auf dem eigenen Server einen Ordner erzeugen (z.b. “scriptaculous”) und folgende Dateien aus der gepackten-Scriptaculous-Version hochladen:
    • prototype.js
    • scriptaculous.js
    • builder.js
    • effects.js
    • dragdrop.js
    • slider.js
    • controls.js
  4. Packt in den “head”-Bereich eurer Website folgenden Code:

    <head> <!-- Hier startet der Head-Bereich -->
    <script src="scriptaculous/prototype.js" type="text/javascript"></script>
    <script src="scriptaculous/scriptaculous.js" type="text/javascript"></script>
    </head> <!-- und hier endet der Head-Bereich -->

  5. Folgende Codes könnt ihr nun in den “body”-Part eurer Website legen und die Effekte selbst bestaunen:

    • <div onclick="new Effect.BlindUp(this, {duration: 3})">
      Klick mich und woanders wird ein Text aufsliden
      </div>

    • <div onclick="new Effect.SwitchOff(ich_will_aufsliden)">
      Klick mich an, wenn ich ausblenden soll.
      </div>
      <div id="ich_will_aufsliden" style="display: none;">
      Klick mich an, wenn ich ausblenden soll.
      </div>

    • <a href="#" onclick="new Effect.Appear(fade_in_text); new Effect.Fade(fade_out_text)">
      Ich bin ein Link, was kann ich machen?
      </a>
      <div id="fade_in_text" style="display: none;">
      Ich bin ein Text der eingeblendet wird
      </div>
      <div id="fade_out_text">
      Ich bin ein Text der ausgeblendet wird
      </div>

Und das waren nur die Effekte, mit Scriptaculous lassen sich auch super leicht sortierbare Listen, Drag and Drop, Autovervollständigung und vieles andere ohne großen Programmieraufwand realisieren.

Auf Script.aculo.us ist das Tutorial selbst zwar auch sehr schnell, aber mir fehlte ein etwas genauerer Teil zur Einbindung in die eigene Seite und ich hoffe das wurde durch die Beispiele nun auch für andere deutlicher.

Linktipp: Werde schneller auf der Tastatur, kostenlos!

Verwandte Artikel
  1. Webdesign Guide - Ajax für das Volk - Scriptaculous und Prototype im Einsatz
  2. Ein kleiner Schritt für den Coder, ein großer Schritt für die Usability
  3. suchergebnisse
  4. PEAR PHP Tutorial
  5. Speedcoding - Coder auf Speed

am November 30, 2006 um 09:13 Uhr | in Webdesign | 11 Kommentare

1 Trackbacks/Pingbacks
  1. Pingback: Ajax-Erfahrungsbericht - die Web2.0-Wunderwaffe » Webdesignblog on Dezember 30, 2006

10 Kommentare
  1. erich, November 30, 2006:

    man muss die effects.js auch einbinden wenn man visuelle effekte nutzen will! oder mit scriptaculous.js?load=effects,dragdrop,… das laden was man braucht!

  2. Thomas Lemmé, Februar 27, 2007:

    Gutes Tutorial, aber da haben sich wohl ein paar Fehler eingeschlichen…
    Wenn man die Effekte nutzen möchte, muss man die effects.js auch noch einbinden, etwa so:

    script src=”scriptaculous/effects.js” type=”text/javascript”

    Bei Punkt 2 wird nichts passieren, wenn man auf das zweite div klickt.

  3. Gregor, März 6, 2007:

    Hab mich gerade gefragt, warums nicht geht:

    Hier müssten noch Hochkommas rein - dann gehts:

    (Firefox 2)

  4. Gregor, März 6, 2007:

    Man kann keine Tags schreiben also:
    div onclick=”new Effect.SwitchOff(’ich_will_aufsliden’)”

  5. Christian, März 6, 2007:

    Wie Thomas angesprochen hat, fehlt wahrscheinlich noch die “Effects.js”, habs nun mal hinzugefügt

  6. Erich Holzbauer, März 6, 2007:

    wenn man nur scriptaculous.js einbindet werden ALLE dateien geladen. wie ich im ersten kommentar geschrieben hab ist auch blödsinn. mit scriptaculous.js?load=effects,dragdrop ladet man nur bestimmte teile, das ist aber nicht für das funktionieren erforderlich.

    jede js datei einzeln einzubinden ist schwachsinn. und aus einem “tag” heraus - so wie du’s nennst, gregor - kann man sehr wohl stink normalen js code ausführen, auch scriptaculous effekte. aber der fehler liegt wie du erkannt hast an den fehlenden hoch kommas bei den target divs!

  7. Thomas Lemmé, März 6, 2007:

    Stimmt, ich hab mich geirrt, die effects.js wird automatisch eingebunden

  8. Tubi, April 26, 2007:

    Also bei mir hats erst nach extrigem einbinden der Effects.js funktioniert!
    danke für diese kurze, aber hilfreiche doku!

    mfG

  9. Thomas Lemmé, Juni 7, 2007:

    Hab ein Tutorial für alle Effekte geschrieben, gibts unter http://www.lemme.at/tutorials/scriptaculous/index.html zum anschaun…

  10. Hans, Juli 30, 2007:

    Danke für diese Doku! Bei mir hat es endlich auch geklappt:)

Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.