DOM Ready
1
Code Link 1 Quellcode Dokumentation:
Y.on("domready", function(e){
// Code
});
DOM Basics
1
Code Link 1 Quellcode Dokumentation:
Y.all("#id, .class, div").setStyle("background", "blue");
DOM Filtering
1 2 3
Code Link 1 Quellcode Dokumentation:
Y.all("div p").setStyle("background", "blue");
Y.all("div[rel='test']").setStyle("background", "blue");
Y.all("div p:nth-child(odd)").setStyle("background", "blue");
DOM Manipulation
1 2 3
Code Link 1 Quellcode Dokumentation:
Y.one("#id1").append("<p>Zusätzlicher Inhalt</p>");
Y.one("#id2").insert("<p>Neuer Inhalt</p>", "replace");
Y.one("#id3").remove();
Effekte
1 2 3
Code Z Link 1 Link 2 Link 3 Zusatz Quellcode Dokumentation:
new Y.Anim({
node: "#id1",
to: {
height: 0
},
duration: 3
}).run();

new Y.Anim({
node: "#id2",
to: {
opacity: 0
},
duration: 1
}).run();

new Y.Anim({
node: "#id3",
to: {
height: 20,
opacity: 0.5
},
duration: 1.5
}).run();
Transitions
1
Code Z Link 1 Zusatz Quellcode Dokumentation:
new Y.Anim({
node: "#id",
to: {
height: 20,
},
duration: 1.5,
easing: Y.Easing.bounceOut
}).run();
Events
1
Code Link 1 Quellcode Dokumentation:
Y.one("#id").on({
click: function(e) {
this.setStyle("background", "red");
},
mouseout: function(e) {
this.setStyle("background", "blue");
}
});
Eigene Funktionen
1
Code Link 1 Quellcode Dokumentation:
Y.Node.prototype.eigeneFunktion = function(parameter){
this.setStyles({
background: parameter.farbe,
border: parameter.rand
});
};

Y.one("#id").eigeneFunktion({
farbe: "red",
rand: "3px blue solid"
});
Ajax
1
Code Z Link 1 Zusatz Quellcode Dokumentation:
Y.io("ajax.html",{
method: "GET",
on: {
success: function(id, req, args){
Y.one("#id").setContent(req.responseText);
}
}
});
Klassen
1
Code Link 1 Quellcode Dokumentation:
function Entwickler(){
Entwickler.superclass.constructor.apply(this, arguments);
}

function Designer(){
Designer.superclass.constructor.apply(this, arguments);
}

Y.extend(Entwickler, Y.Base, {
aufgabe: function(){
return "Entwicklung";
},

info: function(){
alert(this.get("name") + ", " + this.aufgabe() + ", " + this.get("firma"));
}
}, {
NAME: "entwickler",
ATTRS: {
name: {},
firma: {
value: "Neue Firma"
}
}
});

Y.extend(Designer, Entwickler, {
aufgabe: function(){
return "Design";
}
}, {
NAME: "designer"
});

var neuerEntwickler = new Entwickler({ name: "Tim" });
var neuerDesigner = new Designer({ name: "Tom" });

neuerEntwickler.info(); // Ausgabe: "Tim, Entwicklung, Neue Firma"
neuerDesigner.info(); // Ausgabe: "Tom, Design, Neue Firma"

© 2009

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