当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<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来调用该插件。

```html
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来调用该插件。

```html
$('#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()：获取不匹配的列表项。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果