ips.ui.grid

Description

The Grid widget enhances the standard CSS grid with additional functionality, enabling dynamic resizing and equalizing heights of rows.

Usage

The grid widget should be initialized on the same element that contains the ipsGrid CSS classes:

<div class='ipsGrid ipsGrid_collapsePhone' data-ipsGrid data-ipsGrid-minItemSize='200' data-ipsGrid-maxItemSize='400'>
  <div class='ipsGrid_span4'>Item</div>
  <div class='ipsGrid_span4'>Item</div>
  <div class='ipsGrid_span4'>Item</div>
</div>

Your grid items can use any suitable span class by default; the Grid widget will dynamically update the used class depending on the space available.

Note that when using this widget with grids, grid items become greedy. That is, they take up as much space as they are allowed. Therefore, you will need to specify a maxItemSize value (see below) in order to properly size the items.

Options

minItemSize
(Number; required)

The minimum number of pixels wide each grid item can be; when grid items are smaller than this value, the grid spans will be adjusted to the next suitable size to ensure they are larger than this value.

maxItemSize
(Number; required)

The maximum number of pixels wide each grid item can be; when grid items are larger than this value, the grid spans will be adjusted to the next suitable size to ensure they are smaller than this value.

equalHeights
(String; optional)

If set to row, the Grid widget will ensure each item in each row is as tall as the tallest item in that row. If set to all, the Grid widget will ensure all items in the grid are as tall as the tallest item.

Events to which ips.ui.grid responds

newItem

When fired on the wrapper element, this event will cause the grid to redraw, recalculating spans and heights as necessary. 

Event data:

• element (required)
  A DOM or jQuery reference to the new item in the grid