Using Plugins

Using Toolkit plugins (components and behaviors) is extremely simple. If you're familiar with jQuery plugins, it's even simpler. A plugin can be initialized with a single line of code.


What this does is initialize a Tab component on the #tabs element and stores the component instance within memory. Can't get easier than that!


Accessing Instances

To access methods or properties on a plugin, the plugin instance will need to be retrieved. This can be achieved through the toolkit() method by passing the name of the plugin as the 1st argument.

var tabs = $('#tabs').toolkit('tab');

Once we have an instance, methods or properties on the instance can be accessed.

tabs.sections; // Collection of section elements
tabs.jump(1); // Jump to a section
The toolkit() method will return null when no instance is found.

Triggering Methods

Since retrieving an instance can return null and having to check the return value before triggering methods can be quite tedious, we rolled all this functionality into toolkit(). To trigger methods on the plugin instance, pass the method name as the 2nd argument, and an array of arguments to pass to the method as the 3rd argument.

$('#tabs').toolkit('tab', 'jump', [1]);

If an instance is found, the method will automatically be called, else nothing will happen. This allows for seamless error free integration.


Dynamic Content Loading

A handful of plugins use a concept we like to call, dynamic content loading. This concept will determine a type of dynamic content based on a parameter and the load the content automatically. Most of this functionality is handled through the loadContent() method in the Component class. The following formats are currently supported, listed in the order of detection.

DOM Loading

If a DOM ID is passed in the format of #id, the inner HTML of the element will be used as the content.

<div id="element" style="display: none">This content is hidden, but is usable.</div>
component.loadContent('#element'); // This content is hidden, but is usable.

AJAX Loading

If an HTTP URL or an absolute URL for the current domain is passed, then the content will be requested from the URL as an AJAX request.

component.loadContent('/some/url'); // The response from the /some/url AJAX request.
component.loadContent(''); // The response from the AJAX request (if allowed).

This does not work on relative URLs. All absolute domain URLs will require a prefixed forward slash.

Literal Content

If the content does not match a DOM ID or a URL, then the content will be set literally.

component.loadContent('Foobar'); // Foobar
component.loadContent(data); // The value of the data variable.