jQuery Relationships Reference

Instance Settings

A separate Relationships instance is created for each targetted division and has its own settings: $('divs').relationships({...});.

Name	Type	Default	Comments
opacity	Number	20	The percentage (0 to 100) to which icons are faded when they are not selected. For comparison: 0% , 10% , 20% , 50% , 100% .
set1	Object	null	Details about the contents of the first set of items. See set settings below.
set2	Object	null	Details about the contents of the second set of items. See set settings below.
links	int[][2]	null	The relationships between items in the first and second sets. This is an array of arrays of two digits, being the indexes of related items from set one and two. Indexes start at zero. For example, [[0, 0], [1, 0]] connects the first two items from the first set with the first item in the second set.

Set Settings

Name	Type	Default	Comments
images	URL	null	The location of the image file that depicts the items in this set. The image is a horizontal composite of all the item images with each item being associated with the matching position (by default). For example, this image is used for the integers example: .
imageSize	int[2]	null	The size (width and height) of each item image within the images above. For example, the value for the image above is [25, 29].
items	String[] or Object[]	null	The item descriptions for display. If using a String[] that just contains the descriptions, then the images for these items are assumed to match their position in this array. Alternately, use an Object[] to specify the description and imageIndex for each item. For example, you can just use: ['Internet Explorer', 'Firefox', ...] or [{description: 'Windows', imageIndex: 6}, ...].

Functions

Signature	Returns	Comments
$.relationships.setDefaults(settings)	void	Update the default instance settings to use with all Relationships instances.
$(div).relationships('change', settings)	jQuery object	Update the settings for the Relationships instance(s) attached to the given div(s).
$(div).relationships('destroy')	jQuery object	Remove the Relationships functionality from the given div(s).

Styling

The structure of the Relationships content is shown below, allowing you to apply additional CSS styling to your implementations. The outermost div is the one to which the Relationships functionality is applied.

<div id="myRelationships" class="hasRelationships">
	<div class="relationships_set1">
		<span>icon</span>...
	</div>
	<div class="relationships_set2">
		<span>icon</span>...
	</div>
	<div class="relationships_description">description</div>
</div>