A responsive "dynamic layout" jQuery plugin.
DyLay is a jQuery plugin which allows to create dynamic layout very easily.
It respects order of elements.
All functionnalities in 1.5ko (minified) !!!
This version is faster and more responsive ...
Less hole and easier to use its functions.
<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>
#dylay { margin: 0; padding: 0; list-style: none; } #dylay li { float: left; margin: 2px; border-radius: 5px; padding: 2px 5px; font-size: 10px; }
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; })
DyLay has 3 public methods :
position
: fill the holefilter
: 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
)
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'); ...
Google : http://plus.google.com/gouz/
Twitter : http://www.twitter.com/gouz
Mail : sylvain.gougouzian@gmail.com
Fork me on github : http://github.com/gouz/dylay