--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/enmi12/glossaire/_posts/demos/2011-12-22-removing.html Wed Nov 06 03:21:17 2013 +0000
@@ -0,0 +1,79 @@
+---
+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>
+
+ <ul id="add-remove">
+ <li><a href="#add-remove">Add / remove</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 src="../js/fake-element.js"></script>
+ <script>
+ $(function(){
+
+ var $container = $('#container');
+
+ $container.isotope({
+ itemSelector : '.element'
+ });
+
+ $('#removable a').click( function( jQEvent ) {
+ var selector = $(this).attr('data-option-value');
+ var $removable = $container.find( selector );
+ $container.isotope( 'remove', $removable );
+ jQEvent.preventDefault();
+ });
+
+ $('#add-remove a').click( function( jQEvent ) {
+ var $newEls = $( fakeElement.getGroup() );
+ var $firstTwoElems = $container.data('isotope')
+ .$filteredAtoms.filter( function( i ) {
+ return i < 2;
+ });
+
+ $container
+ .isotope( 'insert', $newEls )
+ .isotope( 'remove', $firstTwoElems, function() {
+ // console.log('items removed')
+ });
+ jQEvent.preventDefault();
+ });
+
+ // remove item if clicked
+ $container.delegate( '.element', 'click', function(){
+ $container.isotope( 'remove', $(this) );
+ });
+
+ });
+ </script>
+