You can buy me a beer if you want ;). Thanks

DyLay! v1.1

What is the dylay ?

DyLay is a jQuery plugin which allows to create dynamic layout very easily.

All functionnalities in 1.41ko (minified) !!!

Dylay is responsive

Download

How is the dylay simple ?

Its basic use is the code bellow.

jQuery("#myLayout").dylay('mySelector', 100);

Demonstration

The HTML code is :

	<div id="controls">
		<a href="#" class="filter" data-filter=".voyelle">voyelle</a>
		<a href="#" class="filter" data-filter=".consonne">consonne</a>
		<a href="#" class="filter" data-filter="*">tous</a>
		<a href="#" class="reverse">reverse</a>
		<a href="#" class="sort">sort default</a>
		<a href="#" class="sortvalue">sort data-value</a>
		<a href="#" class="rsortvalue">sort data-value reverse</a>
	</div>
	<ul id="myLayout">
		<li style="width: 200px; height: 200px;" class="voyelle" data-value="42">A</li>
		<li style="width: 100px; height: 300px;" class="consonne" data-value="69">B</li>
		<li style="width: 300px; height: 200px;" class="consonne green" data-value="01">C</li>
		<li style="width: 200px; height: 100px;" class="consonne" data-value="74">D</li>
		<li style="width: 100px; height: 200px;" class="voyelle" data-value="73">E</li>
		<li style="width: 300px; height: 300px;" class="consonne" data-value="07">F</li>
		<li style="width: 200px; height: 200px;" class="consonne green" data-value="26">G</li>
	</ul>

The CSS is :

ul#myLayout { 
	margin: 0 95px; 
	padding: 0; 
	list-style: none; 
	width: 740px; 
	background: #ECECEC; 
}
	ul#myLayout:after { 
		content: '.'; 
		clear: both; 
		display: block; 
		visibility: hidden; 
	}
	ul#myLayout li { 
		margin: 1px; 
	}

The JavaScript is :

jQuery(document).ready(function () {
	var $dylay = jQuery('#myLayout').dylay('>li', 500);
	jQuery('.filter').bind('click', function () {
		$dylay.filter(jQuery(this).data('filter'));
		return false;
	});
	jQuery('.reverse').bind('click', function () {
		$dylay.reverse();
		return false;
	});
	jQuery('.sort').bind('click', function () {
		$dylay.sort();
		return false;
	});
	jQuery('.sortvalue').bind('click', function () {
		$dylay.sort('value');
		return false;
	});
	jQuery('.rsortvalue').bind('click', function () {
		$dylay.sort('value', 'desc');
		return false;
	});
});

Documentation

Parameter Type Description
selector string This parameter specify the items selector.
speed int The speed of animation.

Example of a call with parameters :

var dylay = jQuery("#myLayout").dylay('>li', 400);

Methods

The methods available are :

Method Argument Return Description
position void void Rebuild the layout.
filter selector void Filter the items with a selector.
sort by (string), way (string : 'asc' or 'desc') void Sort the visible items by data-by and order by way.
reverse void void Inverse the order of visible items.

Browser Support

jQuery dylay is tested in Safari, Firefox 1.5+ , Internet Explorer 6+, Opera 9+ and Chrome.

Contact

Twitter : http://www.twitter.com/gouz

Mail : [email protected]