Skip to content
This repository has been archived by the owner on Nov 27, 2018. It is now read-only.

sneaknz/padme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Padme plugin

A jQuery plugin to pad a justified list or group with placeholders, based on the number of columns in the layout. See an example at http://code.sneak.co.nz/padme/.

Usage

Call the plugin on the parent element of the list/group. This doesn't have to be an unordered list, so long as all direct children of the parent are items belonging to the list or group.

Note: You must pass in a value for the number of columns your list/group is laid out with. This can either be done when calling the javascript, or as a data attribute on the list/group itself:

$('.list').padme({ cols: 4 });

Or:

<ul data-padme-cols="4"> ... </ul>

You can optionally pass in a set of options:

$('.list').padme({
	cols: 4,
	children: '.item',
	placeholderEl: 'div'
	placeholderClass: 'my-classname'
});

The plugin first strips out any existing placeholder elements, so you can call the plugin multiple times as your layout changes if required and it will re-pad the list accordingly.

Options

children Optional, String. A comma separated list of elements or IDs/classes for the children you want to be included as part of the group. Useful when you have a number of 'special case' elements that you will be laying out separately but happen to sit within the parent container.
placeholderEl Optional, String. The element type to be used for any placeholders that get added as padding for the group. If not specified, this defaults to using the type of the first child in the group.
placeholderClass Optional, String. A class name to be added to placeholder elements added to pad the group.
allowExtras Optional, Boolean. Defaults to 'false'. Set this to true if there are likely to be extra elements in your group/list that will be different widths and may cause the column calculation to not divide into consistent sizes.
matchCols Optional, Boolean. Defaults to 'false'. Set this to true if you want to always force the maximum number of placeholders to be added. This is mostly useful when dealing with a responsive layout where the number of items per column can fluctuate.