这是一款使用上非常简单的jQueryCSS3元素分类过滤和排序插件。这个分类过滤和排序插件使用CSS的matrix()函数来对元素进行排序转换。整个分类过滤和排序的动画过渡十分的平滑。

安装

可以通过npm和bower来安装该插件。

$ npm install sortboard
$ bower install sortboard         
              

使用方法

HTML结构

可以通过一个列表来存放要进行分类过滤和排序的元素。例如使用无序列表,将要进行分类过滤和排序的元素放入到每一个<li>元素中,每一个<li>元素的data-filter属性用于存放该元素的类别,多个类别用空格分开。

<ul id="sortlist">
  <li data-filter="black second-line infantry-black">♟</li>
  <li data-filter="black second-line infantry-black">♛</li>
  <li data-filter="black second-line infantry-black">♚</li>
  <li data-filter="black second-line infantry-black">♜</li>
  ...
</ul>          
              
JAVASCRIPT

你可以通过纯javascript来调用该插件。

var sortlist = document.getElementById('sortlist');

var sb = new Sortboard(sortlist, {
  gutter: 10,
  filterComplete: function(data) {
    console.log(data);
  },
  sortComplete: function() {
    console.log('Sorting is completed.');
  }
});

// Filter by tag
sb.filterBy('programing');                
              

也可以通过jQuery来调用该插件。

$('#sortlist').sortboard({
  gutter: 10,
  filterComplete: function(e) {
    console.log(e);
  },
  sortComplete: function() {
    console.log('Sort is completed.');
  }
});

// Filter by tag
$('#sortlist').sortboard('filterBy', 'programing');                
              

配置参数

  • gutter:每个列表项之间的margin,单位像素。
  • hiddenClass:隐藏元素的class名称。默认的class名称是.hidden
  • itemsMatchName:匹配元素的class名称。它可以是一个class,如.items,或者是一个标签的名称。默认值是li标签。
  • filterComplete:当分类过滤完成后的回调函数。
  • sortComplete:当排序完成后的回调函数。

方法

  • sort():将元素进行排序。
  • filterBy(string):使用参数string来进行分类过滤。该方法和列表项的data-filter属性匹配。
  • getFilter():获取当前过滤的字符串。
  • getItems():获取所有的列表项。
  • getFoundItems():获取匹配的列表项。
  • getNotFoundItems():获取不匹配的列表项。