Ereignisse: Styles ändern nach Klick, Mouseover oder Scroll

Was sind Ereignisse?

Ereignisse sind bei uns:

  • "Click": der Klick auf die (linke) Maustaste bzw. die Berührung des Bildschirms mit einem Finger ("Touch")
    • "Mouseover": Das Überstrichen eines Moduls mit der Maus
    • "Scroll": Ein Modul erscheint bzw. verlässt den Bildschirm durch Scrollen der Seite

      Was kann man mit Ereignissen machen?

      Beim Auftreten eines Ereignisses kann man die Styles des betroffenen Moduls oder anderer Module ändern. Damit kann man z.B. auf Klick ein Textfeld erscheinen lassen oder ein Modul am oberen Rand fixieren, wenn es den Bildschirm durch Scrolling verlässt. Die Möglichkeiten sind praktisch unbegrenzt, da jedes Modul beliebig viele Ereignisse auslösen bzw. auf mehrere Ereignisse reagieren kann.

      Wie funktioniert es?

      Um ein Ereignis abzufangen, fügt man den Style "Ereignis" in ein beliebiges Modul ein. In den Einstellungen des Styles kann man das gewünschte Ereignis auswählen und ggf. noch genauer spezifizieren.

      Wenn man in den Style "Ereignis" nun weitere Styles einfügt, dann werden diese aktiviert, wenn das Ereignis eintritt. Ein ganz einfaches Beispiel zeigt der folgenden Screenshot: In diesem Fall wird ein Schwarz-/Weiß-Filter durch Anklicken des Bildes aktiviert bzw. deaktiviert.

      Styles anderer Module nach einem Ereignis ändern

      Um bei einem Ereignis auch die Styles anderer Module zu ändern, muss man zuerst den Schalter "Verfügbar in Zustandsselektor" aktivieren. Im dann erscheinenden Feld "Name des Zustands" gibt man eine möglichst sprechende Bezeichnung für den gewünschten Zustand ein. Achtung: Der Name des Zustands darf keine Leerzeichen, Umlaute oder Sonderzeichen enthalten.

      Der unten abgebildete Screenshot zeigt ein Beispiel: Beim Klick auf das linke Bild soll das rechte Bild um 180 Grad gedreht werden. Dazu fügt man zuerst den Ereignis-Style in das linke Bild ein und aktiviert den Schalter "Verfügbar in Zustandsselektor". In diesem Beispiel nennen wir den Zustand "changeImageStyle". Im rechten Bild fügen wir dann den Style "Zustandsselektor" ein. Im Drop-Down dieses Moduls erscheint automatisch unser neu definierter Zustand "changeImageStyle". Diesen wählen wir aus und fügen in den Zustandsselektor den Style "Transformation" ein und stellen unter "Drehen" den Wert "180°" ein.

      Jetzt wird nach Anklicken des Bilds das linke Bild schwarz-/weiß und das rechte Bild um 180 Grad gedreht angezeigt (um die Änderung zu animieren, muss man übrigens nur den Style "Transition" in das linke bzw. rechte Bild einfügen).

      Achtung: Ereignise funktionieren nur, wenn sowohl der Style "Ereignisse" wie auch der Zustandsselektor direkt unterhalb eines Moduls und nicht in einem Style "Selektor" liegen.

      Weitere Einstellungen

      Im Ereignis-Style gibt es noch das Drop-Down "Wenn Ereignis eintritt, enthaltene Styles bzw. Zustand...". Dort wählt man aus, ob die Styles bzw. der Zustand aktiviert/deaktiviert oder gewechselt werden sollen. Wechseln heisst, dass ein aktivierter Zustand deaktiviert wird und umgekehrt. Man kann einen Zustand in mehreren Ereignis-Styles verwenden und damit z.B. über den Klick auf ein Modul ein Textfeld anzeigen und über den Klick auf ein anderes Modul das Textfeld wieder ausblenden.

      Im Drop-Down "Dieses Ereignis ändert Zustände in..." kann man auswählen, für welche Zustandsselektoren das Ereignis gelten soll. Wenn man hier "nur untergeordnete und benachbarte Module" auswählt, dann werden nur Zustandsselektoren angesprochen, die sich in Modulen befinden, die auf der selben und untergeordneten Ebene des Moduls liegen, das den Ereignis-Style enthält. Das ist insbesondere für Page-Blocks praktisch, dann man dadurch den gleichem Zustandsnamen verwenden kann, ohne dass durch Auslösen eines Ereignisses alle Page-Blocks angesprochen werden.

      Demo-Seite und -Projekt

      Eine kleine Demonstration, was mit Ereignissen anstellen kann, seht ihr hier. Das dazugehörige rukzuk-Projekt könnt ihr durch Klick auf den unten stehenden Button herunterladen und in euren rukzuk-Space importieren.

      Built with pride in rukzuk © 2015 rukzuk AG