Using the YUI Loader Utility

The YUI Loader Utility is a client-side JavaScript component that allows you to load specific YUI components and their dependencies into your page via script. While I haven’t used the YUI Loader Utility that often, I like using the utility beacause I don’t have to remember all of the dependencies needed by each component. In addition, I can use the loader utility to load any custom plugins.

To use the YUI Loader Utility, first add it to the head section of your page. In the example below, I have added it to the header page of a wordpress blog.

?View Code JAVASCRIPT
<script src="/lib/yui/yuiloader/yuiloader-min.js" type="text/javascript"></script>

I then create an anonymous function:

?View Code JAVASCRIPT
(function(){
	var loader = new YAHOO.util.YUILoader();
 
	loader.addModule ({
			name: 'INTRIG.imSliderMenu',
			type: 'js',
			fullpath: "/lib/intrig/slidermenu/slidermenu.js",
			varName: 'imSliderMenu'
	});
 
	loader.require("yahoo","yahoo-dom-event","animation", "element", "selector", "fonts", "tabview", "yuiloader", "INTRIG.imSliderMenu");
	filter: "MIN";
	loader.insert({
		base: "/lib/yui/",
		loadOptional: true,
		onSuccess: function() {
			var Event = YAHOO.util.Event,
			Selector = YAHOO.util.Selector,
			Dom = YAHOO.util.Dom;
			Event.onDOMReady(function(){
				var tabView = new YAHOO.widget.TabView('tabbedContent');
				var imSliderMenu = new YAHOO.INTRIG.imSliderMenu({
					menu_container: 'pages',
					active_menu_class: 'selected',
					labels: [{
						caption: "About",
						id: "about"
					}, {
						caption: "Links",
						id: "links"
					}, {
						caption: "Free Stuff",
						id: "freeStuff"
					}],
					anim_options: {
						attributes: 'height',
						duration: 1,
						outMethod: YAHOO.util.Easing.backOut,
						inMethod: YAHOO.util.Easing.backIn
					}
				});
			});
			var elmnts = Dom.getElementsByClassName('yui-content', 'div');
			for (var i=0; i &lt;= elmnts.length; i++) {
      			Dom.setStyle(elmnts[i], 'background-color', '#798992');
			}
 
		}
	});
})();

First I instantiated the loader:

?View Code JAVASCRIPT
var loader = new YAHOO.util.YUILoader();

Then I added a custom plugin using the addModule method:

?View Code JAVASCRIPT
loader.addModule ({
	name: 'INTRIG.imSliderMenu',
	type: 'js',
	fullpath: "/lib/intrig/slidermenu/slidermenu.js",
	varName: 'imSliderMenu'
});

Then I load the required files needed to run my YUI application. The loader.require method also includes any custom plugins. I also include the “MIN” filter so that the minimized version of the component is loaded:

?View Code JAVASCRIPT
loader.require("yahoo","yahoo-dom-event","animation", "element", "selector", "fonts", "tabview", "yuiloader", "INTRIG.imSliderMenu");
filter: "MIN";

Next comes loader.insert where list the base path for the YUI files. I also set loadOptional to true so YUI will load all dependent files such as the relevant CSS files.

When all of the required files have been loaded (onSuccess), I instantiate my custom widget (imSliderMenu).

There are other configurations that can be set with the Loader Utility and there are other ways to set it up.  For more information see YUI Loader Utility.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks