mip-filter 筛选组件

筛选组件，自适应 PC 端和移动端宽度。mipengine.org 有引用。

标题 内容
类型 通用
支持布局 responsive, fixed-height, fill, container, fixed
所需脚本 https://c.mipcdn.com/static/v1/mip-filter/mip-filter.js

示例

基本使用

筛选功能，支持从 hash 定位筛选项。

  1. <mip-filter
  2.     mip-filter-filterWrap=".filter"
  3.     mip-filter-itemWrap=".filter-item-wrap"
  4.     mip-filter-enableHash="true">
  5.     <sidebar class="filter">
  6.         <div class="filter-result"></div>
  7.         <ul class="filter-list">
  8.             <li class="filter-title">
  9.                 <div class="filter-link" data-filtertype="all">(all)查看全部<span class="filter-num">3</span></div>
  10.             </li>
  11.             <li class="filter-title">
  12.                 <div class="filter-link" data-filtertype="widget">(widget)组件<span class="filter-num">2</span></div>
  13.             </li>
  14.             <li class="filter-title">
  15.                 <div class="filter-link" data-filtertype="layout">(layout)组件布局<span class="filter-num">1</span></div>
  16.             </li>
  17.         </ul>
  18.     </sidebar>
  19.     <div class="filter-item-wrap">
  20.         <div class="filter-item" data-filtertype="widget">
  21.             <span>(widget)组件新增</span>
  22.         </div>
  23.         <div class="filter-item" data-filtertype="layout">
  24.             <span>(layout)广告组件 layout 升级</span> 
  25.         </div>
  26.         <div class="filter-item" data-filtertype="widget">
  27.             <span>(widget)测试版发布</span>
  28.         </div>
  29.     </div>
  30. </mip-filter>

自定义筛选文字

下方示例中，mip-filter-filterText="您已经选择："。

  1. <mip-filter 
  2.     mip-filter-filterWrap=".filter"
  3.     mip-filter-itemWrap=".filter-item-wrap"
  4.     mip-filter-enableHash="true"
  5.     mip-filter-filterText="您已经选择：">
  6.     <sidebar class="filter">
  7.         <div class="filter-result"></div>
  8.         <ul class="filter-list">
  9.             <li class="filter-title">
  10.                 <div class="filter-link" data-filtertype="all">(all)查看全部<span class="filter-num">3</span></div>
  11.             </li>
  12.             <li class="filter-title">
  13.                 <div class="filter-link" data-filtertype="widget">(widget)组件<span class="filter-num">2</span></div>
  14.             </li>
  15.             <li class="filter-title">
  16.                 <div class="filter-link" data-filtertype="layout">(layout)组件布局<span class="filter-num">1</span></div>
  17.             </li>
  18.         </ul>
  19.     </sidebar>
  20.     <div class="filter-item-wrap">
  21.         <div class="filter-item" data-filtertype="widget">
  22.             <span>(widget)组件新增</span>
  23.         </div>
  24.         <div class="filter-item" data-filtertype="layout">
  25.             <span>(layout)广告组件 layout 升级</span> 
  26.         </div>
  27.         <div class="filter-item" data-filtertype="widget">
  28.             <span>(widget)测试版发布</span>
  29.         </div>
  30.     </div>
  31. </mip-filter>

属性

mip-filter-filterWrap

说明：筛选按钮 DOM
必选项：是
类型：字符串
取值：document.querySelector() 可填内容，如".box"

mip-filter-itemWrap

说明：筛选项 DOM
必选项：是
类型：字符串
取值：document.querySelector() 可填内容，如".box"

mip-filter-enableHash

说明：是否支持 hash 控制
必选项: 否
类型：字符串
取值：true, false
默认值：true

mip-filter-filterText

说明：筛选链接时，前面的文字。可以不填
必选项：否
类型：字符串
取值：例如“筛选：”， “已选择”，“”