DailyJS

jQuery Roundup: equalize.js, jQuery Builder, Gridster.js

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

jquery ui design plugins layout grid

jQuery Roundup: equalize.js, jQuery Builder, Gridster.js

Posted by Alex R. Young on .
Featured

jquery ui design plugins layout grid

jQuery Roundup: equalize.js, jQuery Builder, Gridster.js

Posted by Alex R. Young on .
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

equalize.js

This plugin comes from the "should I just use a table?" department of design technicalities that we still have to deal with in 2012: equalize.js (GitHub: tsvensen / equalize.js, License: MIT/GPL). Created by Tim Svensen, this plugin resizes elements to match their height or any other dimension supported by jQuery Dimensions.

It works by calling a single method on the parent selector:

// Height is the default
$('#height-example').equalize();

$('.parent').equalize('outerHeight');
$('.parent').equalize('innerHeight');
$('.parent').equalize('width');
$('.parent').equalize('outerWidth');
$('.parent').equalize('innerWidth');

The documentation has full examples.

jQuery Builder

jQuery Builder (GitHub: jgallen23 / jquery-builder, License: MIT, npm: jquery-builder) by Greg Allen is a web-based tool for building a custom version of jQuery 1.8.1. As jQuery has evolved it's got a lot easier to include only the components necessary for a given project. This particular solution has been made using Node, and is installable with npm.

Gridster.js

Gridster.js (GitHub: ducksboard / gridster.js, License: MIT) from Ducksboard is a grid plugin that allows layouts to be designed by drag and drop. Elements can span multiple columns, and by dynamically added and removed. Any element can be used because Gridster is based around data attributes.

Gridster is distributed with suitable CSS, and supports IE 9+, Firefox, Chrome, Safari, and Opera.