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 Zusatz Quellcode Dokumentation:
Y.one("#id1").transition({ height: 0, duration: 3 });
Y.one("#id2").transition({ opacity: 0, duration: 1 });
Y.one("#id3").transition({ height: "20px", opacity: 0.5, duration: 1.5 });
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:
var Developer = Y.Base.create("developer", Y.Base, [], {
task: function(){
return "Entwicklung";
},
info: function(){
alert(this.get("name") + ", " + this.task() + ", " + this.get("company"));
}
}, {
ATTRS: {
name: {},
company: {
value: "New Company"
}
}
});

var Designer = Y.Base.create("designer", Developer, [], {
task: function(){
return "Design";
}
});

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 / Freelancer