Das Mocha UI für MooTools  Basis beta version 0.7 r26 mit Theme-Erweiterung

Einführung

Zum Verständnis von Mocha einige Beispiele. Die Minimalvarianten sind so aufgebaut, dass die Beispiele zunehmend komplexer werden:

Minimalvarianten:

Fenster 1 (nur Fenster)

Fenster 2 (Fenster mit Desktop)

Fenster 3 (Fenster mit Desktop und Pagewrapper)

Fenster 4 (Fenster mit Dock)

Screens 1 (nur Screens)

Screens 2 (Screens mit Desktop)

Navigationsleiste 1 (nur Navigationsleiste)

Navigationsleiste 2 (mit weiteren Parametern)

Navigationsleiste 3 (mit Desktop und Dock)

Fortsetzung

In den Minimalvarianten wurde nicht auf die Elemente mochaDesktopHeader und mochaDesktopTitlebar eingegangen. Deren Verwendung erschließt sich am einfachsten durch den Quelltext dieser Datei.

Komplexe Varianten:

Ein gutes Beispiel für das Zusammenspiel aller Varianten ist diese Datei selbst.

Farbliche Anpassung

Im Mocha-System gibt es zwei Punkte, an denen die farbliche Anpassung ansetzen muss:

  • die Dateien mocha.css und style.css
  • die Datei style.js

Beispiel:

Zur farblich angepassten Variante


Türkei Urlaub

Bemerkung zu Mocha

Besonderheiten

Alle Gestaltungselemente wie Verläufe, Schatten und Steuerlemente werden ohne Grafikdateien ausschließlich mittels der Canvas-Technik dargestellt.