mirror of https://github.com/metafizzy/isotope
David DeSandro
13 years ago
5 changed files with 84 additions and 9 deletions
@ -0,0 +1,60 @@
|
||||
--- |
||||
title: Removing |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Removing items filters them out then removes them from the page. Click on a button or the item itself to remove them.</p> |
||||
</section> |
||||
|
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
|
||||
<h3>Remove</h3> |
||||
|
||||
<ul id="removable" class="option-set clearfix"> |
||||
<li><a href="#remove" data-option-value=".metal">metal</a></li> |
||||
<li><a href="#remove" data-option-value=".transition">transition</a></li> |
||||
<li><a href="#remove" data-option-value=".post-transition">post-transition</a></li> |
||||
<li><a href="#remove" data-option-value=".nonmetal">nonmetal</a></li> |
||||
<li><a href="#remove" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li> |
||||
<li><a href="#remove" data-option-value=".metalloid">metalloid</a></li> |
||||
</ul> |
||||
|
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="variable-sizes clickable clearfix"> |
||||
{% for element in site.elements limit:40 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element' |
||||
}); |
||||
|
||||
$('#removable a').click(function(){ |
||||
var selector = $(this).attr('data-option-value'); |
||||
var $removable = $container.find( selector ); |
||||
$container.isotope( 'remove', $removable ); |
||||
}); |
||||
|
||||
// remove item if clicked |
||||
$container.delegate( '.element', 'click', function(){ |
||||
$container.isotope( 'remove', $(this) ); |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue