Webdesign mit Liquid Canvas

Einbau und Aufruf von Liquid-Canvas

Einbau der JavaScript-Dateien

In der zip-Datei zu Liquid-Canvas Verion 0.3 befinden sich 4 Java-Script-Dateien:

  • jquery-1.3.2.js
  • liquid-canvas.js
  • liquid-canvas-plugins.js
  • excanvas.js

Der Einbau erfolgt mit diesem Code:

<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="liquid-canvas.js"></script>
<script type="text/javascript" src="liquid-canvas-plugins.js"></script>

Der wird sinnvollerweise vor </head> eingefügt. Dabei sollte sowohl der bedingte Kommentar zur Referenzierung von excanvas.js wie auch die Reihenfolge beachtet werden.

Aufruf

Der eigentliche Aufruf erfolgt dann in der folgenden Form:

<script type="text/javascript">
$(window).load(function() {
$(".menupunkt").liquidCanvas(
"fill => rect");
});
</script>

In diesem Beispiel wird allen HTML-Elementen mit der Klasse menupunkt das Liquid-Canvas-Plugin zur Füllung mit einem rechteckigen Hintergrund in den Standardvorgaben zugeordnet.

Etwas komplexer ist dieses Beispiel:

<script type="text/javascript">
$(window).load(function() {
$(".menupunkt, #kopf").liquidCanvas(
"fill{color:#f80} => roundedRect{radius:80}");
});
</script>

Allen Elementen der Klasse menupunkt und dem Element mit der ID kopf wird das Liquid-Canvas-Plugin zur Füllung mit einem Rechteck mit abgerundeten Ecken zugewiesen. Dabei wird die Rundungsvoreinstellung des Plugins überschrieben. Außerdem wird die im Plugin voreingestellte Füllfarbe überschrieben.

Plug-Ins können nicht nur Klassen und ID sondern auch regulären HTML-Tags zugewiesen werden.

Zur ausführlichen Beschreibung der Plug-ins.