jQuery和CSS3超酷元素分类过滤和排序插件

这是一款使用上非常简单的jQuery和CSS3元素分类过滤和排序插件。这个分类过滤和排序插件使用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()：获取不匹配的列表项。