|
1 --- |
|
2 title: Removing |
|
3 layout: default |
|
4 category: demos |
|
5 --- |
|
6 |
|
7 <section id="copy"> |
|
8 <p>Removing items filters them out then removes them from the page. Click on a button or the item itself to remove them.</p> |
|
9 </section> |
|
10 |
|
11 |
|
12 <section id="options" class="clearfix"> |
|
13 |
|
14 |
|
15 <h3>Remove</h3> |
|
16 |
|
17 <ul id="removable" class="option-set clearfix"> |
|
18 <li><a href="#remove" data-option-value=".metal">metal</a></li> |
|
19 <li><a href="#remove" data-option-value=".transition">transition</a></li> |
|
20 <li><a href="#remove" data-option-value=".post-transition">post-transition</a></li> |
|
21 <li><a href="#remove" data-option-value=".nonmetal">nonmetal</a></li> |
|
22 <li><a href="#remove" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li> |
|
23 <li><a href="#remove" data-option-value=".metalloid">metalloid</a></li> |
|
24 </ul> |
|
25 |
|
26 <ul id="add-remove"> |
|
27 <li><a href="#add-remove">Add / remove</a></li> |
|
28 </ul> |
|
29 |
|
30 </section> <!-- #options --> |
|
31 |
|
32 <div id="container" class="variable-sizes clickable clearfix"> |
|
33 {% for element in site.elements limit:40 %} |
|
34 {% include element-partial.html %} |
|
35 {% endfor %} |
|
36 </div> <!-- #container --> |
|
37 |
|
38 <script src="../{{ site.jquery_js }}"></script> |
|
39 <script src="../{{ site.isotope_js }}"></script> |
|
40 <script src="../js/fake-element.js"></script> |
|
41 <script> |
|
42 $(function(){ |
|
43 |
|
44 var $container = $('#container'); |
|
45 |
|
46 $container.isotope({ |
|
47 itemSelector : '.element' |
|
48 }); |
|
49 |
|
50 $('#removable a').click( function( jQEvent ) { |
|
51 var selector = $(this).attr('data-option-value'); |
|
52 var $removable = $container.find( selector ); |
|
53 $container.isotope( 'remove', $removable ); |
|
54 jQEvent.preventDefault(); |
|
55 }); |
|
56 |
|
57 $('#add-remove a').click( function( jQEvent ) { |
|
58 var $newEls = $( fakeElement.getGroup() ); |
|
59 var $firstTwoElems = $container.data('isotope') |
|
60 .$filteredAtoms.filter( function( i ) { |
|
61 return i < 2; |
|
62 }); |
|
63 |
|
64 $container |
|
65 .isotope( 'insert', $newEls ) |
|
66 .isotope( 'remove', $firstTwoElems, function() { |
|
67 // console.log('items removed') |
|
68 }); |
|
69 jQEvent.preventDefault(); |
|
70 }); |
|
71 |
|
72 // remove item if clicked |
|
73 $container.delegate( '.element', 'click', function(){ |
|
74 $container.isotope( 'remove', $(this) ); |
|
75 }); |
|
76 |
|
77 }); |
|
78 </script> |
|
79 |