YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: The YUI Global Object: Load All Modules

## The YUI Global Object: Load All Modules

This example shows how to work with all the modules that are available on a page.

View example in new window.

### Including YUI and Additional Modules on the Page

Here we are including any additional dependencies we need within the page instead of relying on loader to pull them in dynamically.

    <!-- include yui core --><script type="text/javascript" src="../../build/yui/yui.js"></script> <!-- include all requirements for node --><script type="text/javascript" src="../../build/oop/oop.js"></script><script type="text/javascript" src="../../build/event-custom.js"></script><script type="text/javascript" src="../../build/event.js"></script><script type="text/javascript" src="../../build/attribute.js"></script><script type="text/javascript" src="../../build/base.js"></script><script type="text/javascript" src="../../build/dom.js"></script><script type="text/javascript" src="../../build/node.js"></script>

    <!-- include yui core -->
    <script type="text/javascript" src="../../build/yui/yui.js"></script>

    <!-- include all requirements for node -->
    <script type="text/javascript" src="../../build/oop/oop.js"></script>
    <script type="text/javascript" src="../../build/event-custom.js"></script>
    <script type="text/javascript" src="../../build/event.js"></script>
    <script type="text/javascript" src="../../build/attribute.js"></script>
    <script type="text/javascript" src="../../build/base.js"></script>
    <script type="text/javascript" src="../../build/dom.js"></script>
    <script type="text/javascript" src="../../build/node.js"></script>

<!-- include yui core --> <script type="text/javascript" src="../../build/yui/yui.js"></script> <!-- include all requirements for node --> <script type="text/javascript" src="../../build/oop/oop.js"></script> <script type="text/javascript" src="../../build/event-custom.js"></script> <script type="text/javascript" src="../../build/event.js"></script> <script type="text/javascript" src="../../build/attribute.js"></script> <script type="text/javascript" src="../../build/base.js"></script> <script type="text/javascript" src="../../build/dom.js"></script> <script type="text/javascript" src="../../build/node.js"></script>

### Setting up the YUI Instance

When we create our `YUI` instance, we'll tell it to load the `*` module.

The `*` module is a shorthand module name for all modules on the page. This way you don't have to supply the full list of requirements to the `use` method.

    YUI().use('*' ...

    YUI().use('*' ...

YUI().use('*' ...

### Using the callback

You can pass a function as the last argument to the `use`. This function will execute after the `YUI` instance loads all the modules.

The function is supplied one argument: the `YUI` instance that we have just created. When this function executes, all of the modules have been loaded and attached to the instance, ready to use.

    YUI().use('*', function(Y) {    // the Y var passed in here will be our YUI instance});

    YUI().use('*', function(Y) {
        // the Y var passed in here will be our YUI instance
    });

YUI().use('*', function(Y) { // the Y var passed in here will be our YUI instance });

Now that we know all of the modules are loaded, we will show a list of the modules loaded in this `YUI` instance.

    YUI().use('*', function(Y) {    var node = Y.one('#demo');    var used = [];    Y.each(Y.Env._attached, function(v, k) {        used[used.length] = k;    });    used.sort();    node.set('innerHTML', '<strong>Modules Loaded:</strong> ' + used.join(', '));});

    YUI().use('*', function(Y) {
        var node = Y.one('#demo');
        var used = [];
        Y.each(Y.Env._attached, function(v, k) {
            used[used.length] = k;
        });
        used.sort();
        node.set('innerHTML', '<strong>Modules Loaded:</strong> ' + used.join(', '));
    });

YUI().use('*', function(Y) { var node = Y.one('#demo'); var used = []; Y.each(Y.Env._attached, function(v, k) { used[used.length] = k; }); used.sort(); node.set('innerHTML', '<strong>Modules Loaded:</strong> ' + used.join(', ')); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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