热门关键字:
jquery > jquery教程 > jquery教程 > jQuery等高排列插件matchHeight.js

jQuery等高排列插件matchHeight.js

242
作者:管理员
发布时间:2021/5/28 19:11:26
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4820
  Filterizr 是一款筛选过滤jquery插件,它提供了多重筛选过滤方式,能够满足你的不同需求。并且使用了 CSS3 过滤效果,使用户体验更优秀。


  <link rel="stylesheet" href="">


  <script src=""></script>


  <script src=""></script>


  <div class="dowebok">


  <div class="filtr-item" data-category="1, 5">


  <img src="" alt="jQuery等高排列插件matchHeight.js">


  </div>


  <div class="filtr-item" data-category="2, 5">


  <img src="" alt="jQuery等高排列插件matchHeight.js">


  </div>


  <div class="filtr-item" data-category="1, 4">


  <img src="" alt="jQuery等高排列插件matchHeight.js">


  </div>


  …


  </div>


  为标签加上 data-category 属性,用于指定分类 id,可以有多个分类,用都好“,”分开。


  如果需要在额外的标签中加入控制,需要用到其他的 data 属性,如:


  1)单选:


  <li data-filter="all">全部</li>


  <li data-filter="1">分类1</li>


  <li data-filter="2">分类2</li>


  <li data-filter="3">分类3</li>


  2)多选:


  <li data-multifilter="1">代码</li>


  <li data-multifilter="2">素材</li>


  <li data-multifilter="3">模板</li>


  3)排序:


  <li class="shuffle-btn" data-shuffle>随机</li>


  <li class="sort-btn" data-sortAsc>顺序</li>


  <li class="sort-btn" data-sortDesc>倒序</li>


  4)搜索:


  <input class="keyword" placeholder="请输入关键字" data-search>


  $('.dowebok')。filterizr();




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐