YUI Library Examples: The YUI Global Object: YUI Core

The YUI Global Object: YUI Core

Setting up the YUI Instance

Here we will create our YUI instance, loading 'node' so we can work with DOM elements in the example.

YUI().use('node' ...

YUI().use('node' ...

The use method will dynamically fetch anything required for 'node' if it isn't already on the page. If dynamic loading is required, the last parameter supplied to use should be a function to execute when the load is complete. This function will be executed whether or not dynamic loading is required, so it is the preferred pattern for using YUI.

YUI().use('node' function(Y) ...

YUI().use('node' function(Y) ...

The function is supplied a reference to the YUI instance, so we can wrap all of our implementation code inside of the use statement without saving an external reference to the instance somewhere else.

Now that we know all of the modules are loaded, we can use node to update DOM nodes.

YUI().use('node', function(Y) {
    var node = Y.one('#demo');
    Y.log('Found node.. Setting style');
    node.setStyle('backgroundColor', '#D00050');
    node.set('innerHTML', '<strong>Changed!</strong>');
});

YUI().use('node', function(Y) {
    var node = Y.one('#demo');
    Y.log('Found node.. Setting style');
    node.setStyle('backgroundColor', '#D00050');
    node.set('innerHTML', '<strong>Changed!</strong>');
});