DyLay! v2

A responsive "dynamic layout" jQuery plugin.

  • A
  • B
  • C
  • D
  • E
  • F
  • G

Filters

Sorts

DyLay is a jQuery plugin which allows to create dynamic layout very easily.
It respects order of elements.

All functionnalities in 1.5ko (minified) !!!

What's new ?

This version is faster and more responsive ...
Less hole and easier to use its functions.

Le HTML

<ul id="dylay">
	<li style="width: 10%; height: 20px;" class="voyelle"  data-foo="5">A</li>
	<li style="width: 10%; height: 40px;" class="consonne" data-foo="6">B</li>
	<li style="width: 10%; height: 40px;" class="consonne" data-foo="3">C</li>
	<li style="width: 10%; height: 20px;" class="consonne" data-foo="2">D</li>
	<li style="width: 10%; height: 60px;" class="voyelle"  data-foo="4">E</li>
	<li style="width: 10%; height: 60px;" class="consonne" data-foo="1">F</li>
	<li style="width: 10%; height: 20px;" class="consonne" data-foo="7">G</li>
</ul>

<ul id="filters">
	<li><a href="#" data-filter="*">all</a></li>
	<li><a href="#" data-filter=".voyelle">voyelle</a></li>
	<li><a href="#" data-filter=".consonne">consonne</a></li>
</ul>

<ul id="sorts">
	<li><a href="#">text</a></li>
	<li><a href="#" data-sort-by="foo">data-foo</a></li>
	<li><a href="#" data-sort-way="desc">text desc</a></li>
	<li><a href="#" data-sort-by="foo" data-sort-way="desc">data-foo desc</a></li>
</ul>

Le CSS

#dylay { margin: 0; padding: 0; list-style: none; }
    #dylay li { float: left; margin: 2px; border-radius: 5px; padding: 2px 5px; font-size: 10px; }

Le JS

var $dylay = jQuery('#dylay');

// init
$dylay.dylay({
// speed of animation
	speed: 1500,
// make your animation yummy
	easing: 'easeOutElastic',
// selector to define elements
	selector: '>li'
});

// controls
jQuery('#filters a').on('click', function () {
	$dylay.dylay('filter', jQuery(this).data('filter'));	
	return false;
})

jQuery('#sorts a').on('click', function () {
	$dylay.dylay('sort', jQuery(this).data('sort-by'), jQuery(this).data('sort-way'));	
	return false;
})

Technical part

DyLay has 3 public methods :

  • position: fill the hole
  • filter: filter the elements which correspond to the selector passed in argument ( string )
  • sort: sort the elements by data- the first argument ( string ) and the way is defined by the second ( asc or desc )

How to use the dylay object ?

As simple as $('#mySelector').dylay({ params ... }).
After that, you can use the public function like that $('#mySelector').dylay('filter', '.foo'); or $('#mySelector').dylay('sort', 'foo', 'desc'); ...

Old version (1.1)

Download