Smart JavaScript Plugin Autoloading

VM UI Framework makes it ridiculously easy to use our JavaScript plugins. All you need to do is include two JavaScript files and the plugins will be loaded only if they are needed. The plugin loader will also make sure that files aren't inserted twice.

Plugin Loader Code

Just insert the following code into the <head> of your page. Make sure that the relative path to your JavaScript directory is correct (it may vary depending on your file structure).

<script src="../javascript/mootools.1-4-5.js" type="text/javascript"></script>
<script src="../javascript/vmui.js" type="text/javascript"></script>
	window.addEvent('domready', function() {
		var loader = new VMUI({relativePath: '../javascript'});	
Plugin Loader Customization

Since VM UI Framework uses MooTools, it follows a one class per file convention. Once a file is loaded, its class is also automatically instantiated and passed the CSS selectors it needs to interact with. If those selectors aren't found on the page, the file won't be loaded.

You can change the CSS selectors each plugin uses by editing the assets array found in vmui.js.

Note Depending on where you place your JavaScript files, you may need to edit the relative path to indicate the path of your Javscript files relative to the page calling them. If your JavaScript files aren't in the ../JavaScript directory, just edit the relativePath option in vmui.js.

Increasing Plugin Performance

Because each plugin is loaded dynamically after the page is loaded, there may be a slight delay between the page load and when the plugin is activated. For plugins that manipulate visible page elements, this could cause a slight flicker before the plugin activates, depending on connection and download speeds.

To minimize or avoid the visible flicker, you can manually load the plugin file in the document <head> before loading vmui.js. There shouldn't be any need to activate the plugin, it will still be instantiated automatically. Again, no file will be double-loaded.

Adding Your Own Custom Plugins

If you want to add your own plugins to be autoloaded by the VMUI loader, you'll need to create first create a MooTools class, with the first and only required parameter in the constructor being the CSS selectors you want the plugin to interact with. Then, add your plugin to the assets array found in vmui.js.

Each item in the assets array is an object consisting of plugin name, the plugin source file relative to the root JavaScript directory, and the CSS selectors.

For example, if you were creating a plugin that replaced all <span class="smiley"></span> elements with a smiley face, you would create a MooTools class called Smiley in a file called Smiley.js. Then you would add the following object to the assets array:

{name: 'Smiley', source: 'Smiley.js', selectors: 'span[class=smiley]'}

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.