DE EN

Die JavaScript Framework Matrix

soll einen Überblick der bekanntesten JavaScript-Frameworks und deren Funktionen geben. Zu jedem Framework gibt es verschiedene Beispiele und die dazugehörigen Links zur offiziellen Dokumentation. Die Wahl eines Frameworks hängt von vielen Faktoren ab und kann nicht ausschließlich durch dieses Dokument getroffen werden. Die Matrix soll lediglich die unterschiedlichen API-Stile sowie die Funktionsweisen der JavaScript-Bibliotheken veranschaulichen. Es gibt zudem noch weitere interessante Frameworks, die hier aufgelistet sind.

Sortierung:

Allgemein DOM Ready DOM Basics DOM Filtering DOM Manipulation Effekte Transitions Events Eigene Funktionen Ajax Klassen

jQuery

1

Code Link 1 Quellcode Dokumentation:


										jQuery.fn.eigeneFunktion = function(parameter){

											this.css({

												"background": parameter.farbe,

												"border": parameter.rand

											});

										};


										$("#id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

MooTools

1

Code Link 1 Quellcode Dokumentation:


										Element.implement({

											eigeneFunktion: function(parameter){

												this.set("styles", {

													background: parameter.farbe,

													border: parameter.rand

												});

											}

										});


										$("id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

The Dojo Toolkit

1

Code Link 1 Quellcode Dokumentation:


										dojo.extend(dojo.NodeList, {

											eigeneFunktion: function(parameter){

												this.style({

													"background": parameter.farbe,

													"border": parameter.rand

												});

											}

										});


										dojo.query("#id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

Prototype / Script.aculo.us

1

Code Link 1 Quellcode Dokumentation:


										Element.addMethods({

											eigeneFunktion: function(e, parameter){

												$(e).setStyle({

													"background": parameter.farbe,

													"border": parameter.rand

												});

											}

										});


										$("id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

Ext JS

1

Code Link 1 Quellcode Dokumentation:


										Ext.override(Ext.Element, {

											eigeneFunktion: function(parameter){

												this.setStyle({

													"background": parameter.farbe,

													"border": parameter.rand

												});

											}

										});


										Ext.get("id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

Adobe Spry

1

Code Link 1 Quellcode Dokumentation:


										Spry.$$.Results.eigeneFunktion = function(parameter){

											return this.setStyle(

												"background:" + parameter.farbe + ";" +

												"border:" + parameter.rand + ";"

											)

										};


										Spry.$$("#id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

BBC Glow

1

Code E Link 1 Quellcode Dokumentation:


										eigeneFunktion = function(parameter){

											glow.dom.get(parameter.objekt)

												.css("background", parameter.farbe)

												.css("border", parameter.rand);

										};


										eigeneFunktion({

											objekt: "#id",

											farbe: "red",

											rand: "3px blue solid"

										});

Yahoo! UI Library

1

Code Link 1 Quellcode Dokumentation:


										var eigeneFunktion = new YAHOO.util.CustomEvent("eigeneFunktion");

										eigeneFunktion.subscribe(

											function(type, parameter) {

												YAHOO.util.Dom.setStyle(parameter[0].id, "background", parameter[0].farbe);

												YAHOO.util.Dom.setStyle(parameter[0].id, "border", parameter[0].rand);

											}

										);


										eigeneFunktion.fire({

											id: "id",

											farbe: "red",

											rand: "3px blue solid"

										});

Matthias Schütz - Mediendesigner / Webdesigner / Grafiker / Photoshop