YUI 3.x Home -

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.

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.

  1. <!-- include yui core -->
  2. <script type="text/javascript" src="../../build/yui/yui.js"></script>
  3.  
  4. <!-- include all requirements for node -->
  5. <script type="text/javascript" src="../../build/oop/oop.js"></script>
  6. <script type="text/javascript" src="../../build/event-custom.js"></script>
  7. <script type="text/javascript" src="../../build/event.js"></script>
  8. <script type="text/javascript" src="../../build/attribute.js"></script>
  9. <script type="text/javascript" src="../../build/base.js"></script>
  10. <script type="text/javascript" src="../../build/dom.js"></script>
  11. <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.

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

  1. YUI().use('*', function(Y) {
  2. // the Y var passed in here will be our YUI instance
  3. });
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.

  1. YUI().use('*', function(Y) {
  2. var node = Y.one('#demo');
  3. var used = [];
  4. Y.each(Y.Env._attached, function(v, k) {
  5. used[used.length] = k;
  6. });
  7. used.sort();
  8. node.set('innerHTML', '<strong>Modules Loaded:</strong> ' + used.join(', '));
  9. });
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