YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: The YUI Global Object: YUI Core

## The YUI Global Object: YUI Core

This example shows how to use the core of YUI.

View example in new window.

### 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' ...

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) ...

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>');
    });

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>'); });

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings