Plugins basics

This page will give you some general informations on how to use the template plugins.

Inline options

Several plugins allow inline configuration using HTML5 data-* attributes. These work fine, even on older browsers, and remove the need of a custom script for each element. Here is how to use them: for instance, let's say you want to pass this object of options to the plugin:

{
	option1: 'value',
	option2: true,
	option3: 24,
	option4: ['text1', 'text2', 'text3']
}

First, write it inline, putting quotes around options' names:

{ 'option1': 'value', 'option2': true, 'option3': 24, 'option4': ['text1', 'text2', 'text3'] }

Then replace all single quotes by double quotes and insert it in the data-* attribute:

<div data-plugin-options='{"option1":"value","option2":true,"option3":24,"option4":["text1","text2","text3"]}'>

Of course, the name of the data attributes depends on the plugin - you can find the name to use in each plugin's documentation page.

An alternative way to add this data attribute is to do it with jQuery:

$(selector).data('plugin-options', {

	option1: 'value',
	option2: true,
	option3: 24,
	option4: ['text1', 'text2', 'text3'],

	onShow: function()
	{
		...
	},

	onRemove: function()
	{
		...
	}

});

This requires less code if many elements should have these options, gives a convinient way to set functions, and the code is easier to read.

Changing defaults

Most plugins expose their default configurations in a public object, so it is easy to change these values at runtine. For instance, if you need to change some options for the modal plugin:

$.modal.defaults.resizable = false;

Now all calls to the plugins will use this default value.

If you need to change many values, here is a clean way to do it using jQuery's extend method:

$.extend($.modal.defaults, {
	resizable: false,
	beforeContent: '<div class="wrapped">',
	afterContent: '</div>'
});