In der zip-Datei zu Liquid-Canvas Verion 0.3 befinden sich 4 Java-Script-Dateien:
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.
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.