Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

60 lines
1.9 KiB

---
title: Adding items
layout: default
category: demos
---
<section id="copy">
<p>The <code>insert</code> method will append, add items to the widget, filter, sort, and then layout all items</p>
<p>The <code>appended</code> method adds items to the widget, and then lays out only the new items.</p>
<p>The <code>reloadItems</code> method re-collects all items in their current order in the DOM, which can be useful for prepending items.</p>
<p>See docs on <a href="../docs/adding-items.html">adding items</a>.</p>
</section>
<section id="options">
<ul class="clearfix">
<li id="insert"><a href="#insert">Insert new elements</a></li>
<li id="append"><a href='#append'>Append new elements</a></li>
<li id="prepend"><a href='#prepend'>Prepend</a></li>
</ul>
</section>
<div id="container" class="clearfix">
{% for elem_number in site.best_of_order :limit 10 %}
{% assign element = site.elements[elem_number] %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #container -->
<script src="../{{ site.jquery_js }}"></script>
<script src="../{{ site.isotope_js }}"></script>
<script src="../js/fake-element.js"></script>
<script>
$(function(){
var $container = $('#container');
{% include add-buttons.js %}
$('#prepend a').click(function(){
var $newEls = $( fakeElement.getGroup() );
$container
.prepend( $newEls ).isotope('reloadItems').isotope({ sortBy: 'original-order' })
// set sort back to symbol for inserting
.isotope('option', { sortBy: 'symbol' });
return false;
});
$container.isotope({
itemSelector : '.element',
getSortData : {
symbol : function( $elem ) {
return $elem.attr('data-symbol');
}
},
sortBy : 'symbol'
});
});
</script>