source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/yui/yui-loader-ext.html @ 5259

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/yui/yui-loader-ext.html@5259
Revision 5259, 19.4 KB checked in by domlowe, 11 years ago (diff)

adding yui javascript

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <title>YUI Library Examples: The YUI Global Object: YUI Loader - Dynamically Adding YUI and External Modules</title>
5    <meta http-equiv="content-type" content="text/html; charset=utf-8">
6        <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
7
8<style>
9    /*Supplemental CSS for the YUI distribution*/
10    #custom-doc { width: 95%; min-width: 950px; }
11    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
12    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
13</style>
14
15<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
16<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
17<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>
18<!-- In this style block, we override some of the css styles for the calendar.
19     We will use the 'insertBefore' config to make the loader insert the css
20     node before our style block so that our styles will be applied in the
21     correct order. -->
22<style type="text/css" id="styleoverrides">
23#cal1Cont {
24    background-color:#004C6D;
25}
26
27#cal1Cont div.calheader {
28    cursor: move;
29}
30
31#cal1Cont .yui-calendar {
32    width:auto;
33    background-color:transparent;
34}
35
36#cal1Cont .yui-calendar tr, #cal1Cont .yui-calendar th {
37    background-color:transparent;
38    vertical-align:middle;
39    text-transform:none;
40    color:#fff;
41}
42
43#cal1Cont .yui-calendar a:hover {
44    text-decoration:none;
45}
46
47#results {
48    background-color:#8DD5E7;
49    border:1px solid black;
50    position: absolute;
51    top: 15px;
52    right: 5px;
53    width: 300px;
54}
55</style>
56
57</head>
58<body id="yahoo-com" class=" yui-skin-sam">
59<div id="custom-doc" class="yui-t2">
60<div id="hd">
61        <div id="ygunav">
62                <p>
63            <em>
64                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> 
65            </em>
66                </p>
67                <form action="http://search.yahoo.com/search" id="sitesearchform">
68            <input name="vs" type="hidden" value="developer.yahoo.com">
69            <input name="vs" type="hidden" value="yuiblog.com">
70                    <div id="sitesearch">
71                        <label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
72                            <input type="text" id="searchinput" name="p">
73                            <input type="submit" value="Search" id="searchsubmit" class="ygbt">
74                    </div>
75                </form>
76    </div>
77        <div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
78        <div id="pagetitle"><h1>YUI Library Examples: The YUI Global Object: YUI Loader - Dynamically Adding YUI and External Modules</h1></div>
79</div>
80<div id="bd">
81
82        <div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
83
84        <div id="yui-main">
85                <div class="yui-b">
86                  <div class="yui-ge">
87                          <div class="yui-u first example" id="main">
88
89        <h2>The YUI Global Object: YUI Loader - Dynamically Adding YUI and External Modules</h2>
90
91        <div id="example" class="promo">
92        <p>
93        <p>This example uses the dynamic loading capability built into YUI to
94pull in additional components as needed.  In addition, it demonstrates
95how to define external modules that can be loaded alongside YUI.
96</p>
97<p>This example works as follows:</p>
98<ol>
99<li>A <code>YUI</code> instance is created with a configuration object that defines parameters we need to dynamically load new modules.</li>
100<li><code>node</code> is used so that we can bind an event listener to a button.  YUI will dynamically fetch <code>node</code> and its
101dependencies.  By default, these dependencies will be fetched from the Yahoo! CDN and will be combined into a single file.</li>
102<li>A click listener is added to a button.</li>
103<li>When this button is clicked, YUI will dynamically fetch 3.x Drag &amp; Drop and 2.x Calendar files. 
104The CSS file will be fetched first; this helps prevent a flash of unstyled content when the
105Calendar Control is loaded.  This file is inserted above a style block which contains our custom calendar styles (via a YUI config option) so that styles are applied in the correct order.</li>
106<li>A Calendar instance is created, and it is made draggable.</li>
107</ol>
108        </p>   
109
110        <div class="module example-container ">
111                        <div class="hd exampleHd">
112                        <p class="newWindowButton yui-skin-sam">
113                <a href="yui-loader-ext_clean.html" target="_blank">View example in new window.</a>
114            </p>
115                </div>          <div id="example-canvas" class="bd">
116
117               
118        <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
119       
120       
121<input id="button1" type="button" value="Click to load YUI Calendar" class="button" />
122
123<div id="cal1Cont"></div>
124
125<script>
126
127YUI({base:"../../build/", timeout: 10000, insertBefore: 'styleoverrides', modules: { 'yui2-yde': { fullpath: 'http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js' }, 'yui2-calendar': { fullpath: 'http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js', requires: ['yui2-yde', 'yui2-calendarcss'] }, 'yui2-calendarcss': { fullpath: 'http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css', type: 'css' } }}).use('node', function(Y, result) {
128
129    // The callback supplied to use() will be executed regardless of
130    // whether the operation was successful or not.  The second parameter
131    // is a result object that has the status of the operation.  We can
132    // use this to try to recover from failures or timeouts.
133    if (!result.success) {
134
135        Y.log('Load failure: ' + result.msg, 'warn', 'Example');
136
137    } else {
138
139        // Add a button click listener to load the calendar
140        var handle = Y.on('click', function(e) {
141
142            // dynamically load the 2.x calendar and 3.x drag and drop
143            Y.use('dd-drag', 'yui2-calendar', function(Y) {
144                var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
145
146                // Once the 2.x calendar renders, we will add 3.x drag
147                // functionality to it.
148                cal1.renderEvent.subscribe(function() {
149                    var dd = new Y.DD.Drag({
150                        node: '#cal1Cont'
151                    }).addHandle('div.calheader');
152                });
153                cal1.render();
154            });
155
156            // Remove the button click listener so that we only try to
157            // load the calendar control once.
158            handle.detach();
159
160        }, '#button1');
161    }
162
163
164});
165</script>
166       
167        <!--END SOURCE CODE FOR EXAMPLE =============================== -->
168       
169               
170                </div>
171        </div>                 
172        </div>
173               
174        <h3>Creating your YUI instance</h3>
175<p>First, we need to create our YUI instance with the <code>node</code> module, so we can attach a listener to a button.</p>
176<textarea name="code" class="JScript">YUI().use('node', function(Y) {
177});
178</textarea>
179
180<p>YUI accepts a configuration object when you create an instance.  Your dynamic-loading options can be defined here.</p>
181<textarea name="code" class="JScript">YUI({
182
183    // We can specify a node that is the insertion point for all new nodes.  This
184    // is useful for making sure css rules are applied in the correct order.
185    insertBefore: 'styleoverrides',
186
187    // This lets you define one or more external modules that will be added to
188    // the YUI metadata.  You can define dependency relationships between your
189    // modules and also between your modules and YUI modules.  Here we are
190    // defining 2.x calendar components as external modules.  See
191    // <a href="http://developer.yahoo.com/3.x/api/Loader.html#method_addModule">
192    // the API docs</a> for a complete list of module configuration options.
193    modules: {
194        'yui2-yde': {
195            fullpath: "http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"
196        },
197        'yui2-calendar': {
198            fullpath: "http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js",
199            requires: ['yui2-yde', 'yui2-calendarcss']
200        },
201        'yui2-calendarcss': {
202            fullpath: "http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css",
203            type: 'css'
204        }
205    }
206
207}).use('node', function(Y) {
208});
209</textarea>
210
211<h3>Creating the Calendar</h3>
212<p>Now that we have our core YUI instance in place, we add an event listener to
213a button that will dynamically load YUI 3.x Drag &amp; Drop and YUI 2.x Calendar.</p>
214<textarea name="code" class="JScript">// The callback supplied to use() will be executed regardless of
215// whether the operation was successful or not.  The second parameter
216// is a result object that has the status of the operation.  We can
217// use this to try to recover from failures or timeouts.
218if (!result.success) {
219
220    Y.log('Load failure: ' + result.msg, 'warn', 'Example');
221
222} else {
223
224    // Add a button click listener to load the calendar
225    var handle = Y.on('click', function(e) {
226
227        // dynamically load the 2.x calendar and 3.x drag and drop
228        Y.use('dd-drag', 'yui2-calendar', function(Y) {
229            var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
230
231            // Once the 2.x calendar renders, we will add 3.x drag
232            // functionality t0 it.
233            cal1.renderEvent.subscribe(function() {
234                var dd = new Y.DD.Drag({
235                    node: '#cal1Cont'
236                }).addHandle('div.calheader');
237            });
238            cal1.render();
239        });
240
241        // Remove the button click listener so that we only try to
242        // load the calendar control once.
243        handle.detach();
244
245    }, '#button1');
246}
247</textarea>
248
249<h3>Full source</h3>
250<textarea name="code" class="JScript"><input id="button1" type="button" value="Click to load YUI Calendar" class="button" />
251
252<div id="cal1Cont"></div>
253
254<script>
255
256YUI({
257
258    // We can specify a node that is the insertion point for all new nodes.  This
259    // is useful for making sure css rules are applied in the correct order.
260    insertBefore: 'styleoverrides',
261
262    // This lets you define one or more external modules that will be added to
263    // the YUI metadata.  You can define dependency relationships between your
264    // modules and also between your modules and YUI modules.  Here we are
265    // defining 2.x calendar components as external modules.  See
266    // <a href="http://developer.yahoo.com/3.x/api/Loader.html#method_addModule">
267    // the API docs</a> for a complete list of module configuration options.
268    modules: {
269        'yui2-yde': {
270            fullpath: "http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"
271        },
272        'yui2-calendar': {
273            fullpath: "http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js",
274            requires: ['yui2-yde', 'yui2-calendarcss']
275        },
276        'yui2-calendarcss': {
277            fullpath: "http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css",
278            type: 'css'
279        }
280    },
281
282    // Specifies whether or not optional dependencies should be loaded
283    // loadOptional: true,
284
285    // By default, the minified versions of the files are loaded.  We can specify
286    // 'debug' to load versions with log statements, or 'raw' to load a version
287    // that isn't minified, but has log statements stripped.
288    filter: 'debug',
289
290    // Give up if any single node request takes more than 10 seconds.
291    timeout: 10000
292
293// 3.x node will be dynamically loaded so we can work with DOM elements
294}).use('node', function(Y, result) {
295
296    // The callback supplied to use() will be executed regardless of
297    // whether the operation was successful or not.  The second parameter
298    // is a result object that has the status of the operation.  We can
299    // use this to try to recover from failures or timeouts.
300    if (!result.success) {
301
302        Y.log('Load failure: ' + result.msg, 'warn', 'Example');
303
304    } else {
305
306        // Add a button click listener to load the calendar
307        var handle = Y.on('click', function(e) {
308
309            // dynamically load the 2.x calendar and 3.x drag and drop
310            Y.use('dd-drag', 'yui2-calendar', function(Y) {
311                var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
312
313                // Once the 2.x calendar renders, we will add 3.x drag
314                // functionality to it.
315                cal1.renderEvent.subscribe(function() {
316                    var dd = new Y.DD.Drag({
317                        node: '#cal1Cont'
318                    }).addHandle('div.calheader');
319                });
320                cal1.render();
321            });
322
323            // Remove the button click listener so that we only try to
324            // load the calendar control once.
325            handle.detach();
326
327        }, '#button1');
328    }
329
330
331});
332</script>
333
334</textarea>
335
336                                </div>
337                                <div class="yui-u sidebar">
338                                       
339                               
340                                        <div id="examples" class="mod box4">
341                        <div class="hd">
342                                                <h4>
343    The YUI Global Object Examples:</h4>
344                        </div>
345                                                <div class="bd">
346                                                        <ul>
347                                                                <li><a href='../yui/yui-core.html'>YUI Core</a></li><li><a href='../yui/yui-more.html'>Load All Modules</a></li><li><a href='../yui/yui-multi.html'>Multiple Instances</a></li><li><a href='../yui/yui-compat.html'>YUI 2.x and 3.x</a></li><li class='selected'><a href='../yui/yui-loader-ext.html'>YUI Loader - Dynamically Adding YUI and External Modules</a></li><li><a href='../yui/yui-extend.html'>Create Class Hierarchies with <code>extend</code></a></li><li><a href='../yui/yui-augment.html'>Compose Classes of Objects with <code>augment</code></a></li><li><a href='../yui/yui-mix.html'>Add Behaviors to Objects with <code>mix</code></a></li><li><a href='../yui/yui-merge.html'>Combine Data Sets with <code>merge</code></a></li><li><a href='../yui/yui-isa.html'>Check Data Types with <code>Lang</code></a></li><li><a href='../yui/yui-ua.html'>Browser Detection with <code>UA</code></a></li>                                                      </ul>
348                                                </div>
349                                        </div>
350                                       
351                                        <div class="mod box4">
352                        <div class="hd">
353                                                <h4>More The YUI Global Object Resources:</h4>
354                        </div>
355                        <div class="bd">
356                                                <ul>
357                                                        <!-- <li><a href="http://developer.yahoo.com/yui/yui/">User's Guide</a> (external)</li> -->
358                                                <li><a href="../../api/module_yui.html">API Documentation</a></li>
359</ul>
360                        </div>
361                                        </div>
362                          </div>
363                </div>
364               
365                </div>
366        </div>
367
368
369<div class="yui-b toc3" id="tocWrapper">
370<!-- TABLE OF CONTENTS -->
371<div id="toc">
372       
373<ul>
374<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="selected "><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Base - Functional Examples" href="../../examples/base/index.html">Base</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
375</div>
376</div>
377        </div><!--closes bd-->
378
379        <div id="ft">
380        <p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
381        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
382            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
383            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
384            <a href="http://careers.yahoo.com/">Job Openings</a></p>
385        </div>
386</div>
387<script src="../../assets/dpSyntaxHighlighter.js"></script>
388<script language="javascript"> 
389dp.SyntaxHighlighter.HighlightAll('code'); 
390</script>
391</body>
392</html>
393<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:34 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.