jQuery插件MixItUp实现动画过滤和排序


Posted in Javascript onApril 12, 2015

什么是MixItUp?

MixItUp是一个jQuery插件,提供动画过滤和排序。
MixItUp是伟大的,像管理投资组合,画廊和博客的任何分类或排序的内容,而且还可以作为一个功能强大的工具,从事应用程序的用户界面和数据可视化。
MixItUp起着很好的与您现有的HTML和CSS,使之成为响应布局的绝佳选择。
而不是用绝对定位来控制布局,MixItUp设计与现有的在线流布局工作。要使用百分比,媒体查询,inline-block的,甚至是弯曲盒子?没问题!

页面代码

<div id="Container"> 
  <div class="mix category-1" data-my-order="1"> ... </div> 
  <div class="mix category-1" data-my-order="2"> ... </div> 
  <div class="mix category-2" data-my-order="3"> ... </div> 
  <div class="mix category-2" data-my-order="4"> ... </div> 
</div>

MixItUp目标与类混合容器中的元素。分类过滤添加为类和排序属性添加自定义数据属性。

建立你的过滤器控制:

class="filter" data-filter=".category-1">Category 1 
class="filter" data-filter=".category-2">Category 2

过滤发生在过滤器按钮被点击。

建立您的排序控件:

class="sort" data-sort="my-order:asc">Ascending Order 
class="sort" data-sort="my-order:desc">Descending Order

排序发生在排序按钮被点击。

CSS

#Container .mix{ 
  display: none; 
}

在项目的样式,设置目标元素没有显示属性。 MixItUp将只显示那些匹配当前的过滤元件。

JS

实例MixItUp上使用jQuery的容器:

$(function(){ 
  $('#Container').mixItUp();  
});

使用我们的容器的ID,我们可以实例化MixItUp与jQuery的方法.mixItUp()

查看DEMO   立即下载

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
jQuery实现简单二级下拉菜单
Apr 12 #Javascript
纯JS实现旋转图片3D展示效果
Apr 12 #Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 #Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 #Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 #Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 #Javascript
JavaScript 面向对象与原型
Apr 10 #Javascript
You might like
Php Cookie的一个使用注意点
2008/11/08 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python time模块用法实例详解
2014/09/11 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python中按键来获取指定的值
2019/03/02 Python
python处理“
2019/06/10 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python属性和内建属性实例解析
2020/01/14 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
家长通知书教师评语
2014/04/17 职场文书
写字楼租赁意向书
2014/07/30 职场文书
政风行风整改方案
2014/10/25 职场文书
八一建军节慰问信
2015/02/14 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
初二英语教学反思
2016/02/15 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server