Date post: | 18-May-2015 |
Category: |
Documents |
Upload: | jinho-jung |
View: | 2,371 times |
Download: | 0 times |
YUI()An Introduction to YUI 3
Jenny Han Donnelly
YUI Library
YUI Library Overview
Core
Utilities
Widgets
CSS
Introducing YUI 3
Lighter
Easier
Faster
The Sandbox Model
The Sandbox Model
<script src="yui-min.js">
<script>
YUI().use("anim", function(Y) {
...
});
</script>
Optimized Loading
<script src="yui-min.js">
<script>YUI().use("anim", function(Y) {
});</script>
<script src="http://yui.yahooapis.com/combo?oop-min.js&event-min.js..">
<script src="oop-min.js">
<script src="event-min.js">
<script src="attribute-min.js">
<script src="base-min.js">
<script src="dom-min.js">
<script src="node-min.js">
<script src="anim-min.js">
var a = new Y.Anim({...});
a.run();
Protection from Other Modules
<script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js">
<script> YUI().use("financeapp", function(Y) { ... }); </script>
<script src="http://yui.yahooapis.com/3.0/build/yui/yui-min.js">
<script> YUI().use("moviesapp", function(Y) {
... }); </script>
The YUI Buffet
Sub-Module Architecture
io : All IO functionality (7.4K)
– io-base : Core XHR functionality (3.3K)
– io-form : Form mining support (1K)
– io-queue : Transaction Queuing support (0.7K)
– io-upload : File upload support (1.7K)
– io-xdr : Cross domain support (0.7K)
YUI().use("io-base", function(Y) {…})YUI().use("io-form", "io-xdr", function(Y) {…})YUI().use("io", function(Y) {…})
IO's K-Weight Profile
0
1
2
3
4
5
6
7
8
K-W
eig
ht
(min
ifie
d,
no
n-g
zip
)
IO Component
io-xdr
io-upload
io-queue
io-form
io-base
connection
Extension and Plugin Architecture
Overlay
Tooltip
myOverlay
Positioning
Adv. Positioning
Shimming/Stacking
Header/Body/Footer
Animation
IO Binding
Widget
The Node Wrapper
Working with DOM Elements in YUI 3
var node = Y.get(".actions li.task.selected");
node.addClass("current");
node.on("click", handler);
Y.get(…).addClass("current").on("click", handler);
Supports
node.appendChild(aNode)
node.cloneNode(boolean)
node.scrollIntoView()
node.focus()
node.get("parentNode")
node.set("innerHTML","Foo")
Normalizes
node.getAttribute("href")
node.contains(aNode)
node.getStyle("paddingTop")
node.previous()
Enhances
node.addClass("selectable")
node.toggleClass("enabled")
node.getXY()
node.get("region")
node.on("srcChange", fn)
node.after("innerHTMLChange", fn)
Extendable
node.plug(IOPlugin);
node.io.getContent("http://foo/bar");
node.plug(DragDropPlugin);
node.dd.set("handle", ".title");
Constrainable
Node is the single point of access to the DOM.
Makes YUI 3 ideal as a trusted source for"constrained" environments like Caja andAd-safe.
NodeList
* The Costco to Node’s Kwik-E Mart
var items = Y.all(".actions li");items.addClass("disabled");items.set("title", "Item Disabled");
items.each(function(node) { node.addClass("disabled); node.set("title", "Item Disabled");});
YUI 3 Node API
SupportsNormalizesEnhancesExtendableConstrainable
The Event System
Event Listeners & Event Facades
// Dom EventmyElement.on("click", function(e) { if (!e.target.hasClass("disabled")) { e.preventDefault(); }});
// Custom EventmyWidget.on("select", function(e) { if (e.newVal < 200) { e.preventDefault(); }});
Detaching Listeners
// YUI 3var handle = overlay.on("show", myShowHandler);handle.detach();
// Oroverlay.on("myapp|show", myShowHandler);overlay.on("myapp|hide", myHideHandler);
overlay.detach("myapp|show");
overlay.detach("myapp|*");
Custom Event Flow: On/Default/After
On
On
Default Behavior
After
After
After
this.fire("select");
e.stopImmediatePropagation();
e.preventDefault();
e.stopImmediatePropagation();
DOM Event Delegation
Y.on("delegate", function(e) { e.target.addClass("selected")}, "ul", "click", "li");
MenuMenuItem
Custom Event Delegation
On
On
Def. Behavior
After
After
After
this.fire("menuitem:select")
On
Def. Behavior
After
After
e.stopPropagation()
YUI 3 Event Model
Event Listening
Event Facades
Detaching
Built-in "on" and "after" moments
Prevent default behavior
Event bubbling
YUI Library Overview
Documentation
Community
Thanks!
Read http://developer.yahoo.com/yui/3
Discuss http://yuilibrary.com/forum/viewforum.php?f=15
Or just jump in headfirst…
http://github.com/yui/yui3/tree/master