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.
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>
<script>
window.addEvent('domready', function() {
var loader = new VMUI({relativePath: '../javascript'});
});
</script>
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.
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.
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.