1 ---

     2 title: Sorting

     3 layout: default

     4 category: demos

     5 ---

     6   

     7   <section id="copy">

     8     <p>Sort item elements based on any data you can extract from them.</p>

     9     <p>See <a href="../docs/sorting.html">docs on sorting</a>.</p>

    10   </section>

    11   

    12   <section id="options" class="clearfix">

    13     

    14     {% include sort-buttons.html %}

    15 

    16   </section> <!-- #options -->

    17   

    18   <div id="container" class="clearfix">

    19     {% for elem_number in site.best_of_order %}

    20       {% assign element = site.elements[elem_number] %}

    21       {% include element-partial.html %}

    22     {% endfor %}

    23   </div> <!-- #container -->

    24   

    25   <script src="../{{ site.jquery_js }}"></script>

    26   <script src="../{{ site.isotope_js }}"></script>

    27   <script>

    28     $(function(){

    29       

    30       var $container = $('#container');

    31       

    32       $container.isotope({

    33         itemSelector : '.element',

    34         getSortData : {

    35           symbol : function( $elem ) {

    36             return $elem.attr('data-symbol');

    37           },

    38           category : function( $elem ) {

    39             return $elem.attr('data-category');

    40           },

    41           number : function( $elem ) {

    42             return parseInt( $elem.find('.number').text(), 10 );

    43           },

    44           weight : function( $elem ) {

    45             return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );

    46           },

    47           name : function ( $elem ) {

    48             return $elem.find('.name').text();

    49           }

    50         }

    51       });

    52       

    53       {% include option-set-buttons.js %}

    54       

    55     });

    56   </script>