Sha256: b3c8df3467169cfab3a9f4d1893a62d645b94aadfa8f21ec4255cdf5a49f9ede
Contents?: true
Size: 1.89 KB
Versions: 11
Compression:
Stored size: 1.89 KB
Contents
---
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',
filter: '*',
getSortData : {
symbol : function( $elem ) {
return $elem.attr('data-symbol');
}
},
sortBy : 'symbol'
});
});
</script>
Version data entries
11 entries across 11 versions & 1 rubygems