In this example, we bring a YUI component onto the page using the YUI Loader Utility. This example implements YAHOO.util.YUILoader.
This example loads in new window to demonstrate the simplest use case — a page with no other content, wherein the Loader is introducing YUI into a simple context.
This example implements the YUI Loader Utility to load the Calendar Control.
The workflow happens in three steps:
YAHOO.util.YUILoader
instance: We pass a configuration object to set up our instruction set for Loader, including things like what components to load, whether to load optional components, and what to do once the components are loaded (in this case, once the components are loaded we instantiate a Calendar Control on the page).Here's what that looks like in terms of raw source — this is the full JavaScript source code for this example:
1 | <script> |
2 | |
3 | var loader = new YAHOO.util.YUILoader({ |
4 | |
5 | require: ['calendar'], // what components? |
6 | |
7 | base: '../../build/',//where do they live? |
8 | |
9 | //filter: "DEBUG", //use debug versions (or apply some |
10 | //some other filter? |
11 | |
12 | //loadOptional: true, //load all optional dependencies? |
13 | |
14 | //onSuccess is the function that YUI Loader |
15 | //should call when all components are successfully loaded. |
16 | onSuccess: function() { |
17 | //Once the YUI Calendar Control and dependencies are on |
18 | //the page, we'll verify that our target container is |
19 | //available in the DOM and then instantiate a default |
20 | //calendar into it: |
21 | YAHOO.util.Event.onAvailable("calendar_container", function() { |
22 | var myCal = new YAHOO.widget.Calendar("mycal_id", "calendar_container"); |
23 | myCal.render(); |
24 | }) |
25 | }, |
26 | |
27 | // should a failure occur, the onFailure function will be executed |
28 | onFailure: function(o) { |
29 | alert("error: " + YAHOO.lang.dump(o)); |
30 | } |
31 | |
32 | }); |
33 | |
34 | // Calculate the dependency and insert the required scripts and css resources |
35 | // into the document |
36 | loader.insert(); |
37 | |
38 | </script> |
39 | |
40 | <script src="../../build/yuiloader/yuiloader.js"></script> |
view plain | print | ? |
This code executes the following steps in order:
<script>
node that it inserts on the page. It waits for that file to load, then loads the Calendar Control's JavaScript file; this must be loaded after Yahoo, Dom and Event are in place. (The CSS file is loaded immediately by inserting a <link>
element on the page.) onSuccess
function. This is the member of the configuration object in which we specfied our instantiation logic for Calendar. You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings