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.
<!-- 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('*' ...
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 });
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(', ')); });