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

什么是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   立即下载

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

赞 (0)

相关推荐

  • jQuery之排序组件的深入解析

    jQuery之排序组件的深入解析

    1:排序(Sortable)组件可以将页面上的一组元素变成可排序的,可用于定义一个可排序的元素列表,然后,通过拖动鼠标可以调整元素在列表中的位置$('.selector').sortable(options);    简单实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

  • jQuery对JSON数据进行排序输出的方法

    本文实例讲述了jQuery对JSON数据进行排序输出的方法.分享给大家供大家参考.具体实现方法如下: $.getJSON('URl',function(data){ data.sort(function(a,b){return a.demoname-b.demoname}); for(i=0;i<data.length;i++){ alert(data[i].demoname) } }) 希望本文所述对大家的jQuery程序设计有所帮助.

  • jqueryUI里拖拽排序示例分析

    示例参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这个是html代码 复制代码 代码如下: <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog">

  • JQuery+Ajax实现数据查询、排序和分页功能

    之前很少会用javascript去实现页功能主要怕麻烦,但了解JQuery后这种想法发生了变化:有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来,这样编写高重用性的脚本就更方便.下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询.排序和分页功能的复用脚本,只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能. 先看下实现功能的代码: /**应用脚本规则: 引用脚本: JQuery脚本和JQuery的form插件脚本 Form的ID: viewfor

  • jquery对元素拖动排序示例

    完整代码:(aspx文件末尾有下载) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

  • jQuery表格排序组件-tablesorter使用示例

    jQuery表格排序组件-tablesorter使用示例

    一.引入文件 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <

  • 用jquery.sortElements实现table排序

    项目中要实现table排序的功能. 网上有很多解决方案,很多都基于jQuery. jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题. DataTables,大小75KB,功能强大,带分页,搜索等功能. 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星. 最后我选择用sortElements,实现很简单: 1. 引入jQuery 复制代码 代码如下: <script type="text/java

  • jQuery仿360导航页图标拖动排序效果代码分享

    jQuery仿360导航页图标拖动排序效果代码分享

    jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码.本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下. 运行效果图:                                         ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的360导航页图标拖动排序效果代码如下 <!DOCTYPE

  • 页面内容排序插件jSort使用方法

    页面内容排序插件jSort使用方法

    当页面列表内容很多的时候,我们可能需要将内容按照某个方式进行排序,比如按照字母或者大小等排序.本文将使用排序插件jSort来对页面内容进行排序. jSort插件可以对页面任何内容进行排序(tables, lists, div elements),跨浏览器兼容且非常轻巧. 运行效果图: XHTML 首先在head部分引入jquery库和jSort插件. <script type="text/javascript" src="http://ajax.googleapis.c

  • jquery实现表格本地排序的方法

    本文实例讲述了jquery实现表格本地排序的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title>jquery 表格排序</title>     <style type="text/css">         thead

  • JQuery实现带排序功能的权限选择实例

    本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jquery 表格排序、实时搜索表格内容(附图)

    jquery 表格排序、实时搜索表格内容(附图)

    复制代码 代码如下: <table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sort">Email</th>

  • jquery实现的鼠标拖动排序Li或Table

    1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

随机推荐