{"id":13447467,"url":"https://github.com/patrickkunka/mixitup","last_synced_at":"2025-12-12T04:23:43.299Z","repository":{"id":8279118,"uuid":"9775802","full_name":"patrickkunka/mixitup","owner":"patrickkunka","description":"A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more","archived":false,"fork":false,"pushed_at":"2024-10-30T05:32:14.000Z","size":2537,"stargazers_count":4517,"open_issues_count":69,"forks_count":736,"subscribers_count":159,"default_branch":"v3","last_synced_at":"2024-10-30T08:37:12.122Z","etag":null,"topics":["animation","dom-manipulation","filter","sort","vanilla-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patrickkunka.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-04-30T17:09:44.000Z","updated_at":"2024-10-30T05:32:19.000Z","dependencies_parsed_at":"2022-07-17T01:16:08.450Z","dependency_job_id":null,"html_url":"https://github.com/patrickkunka/mixitup","commit_stats":null,"previous_names":["barrel/mixitup"],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickkunka%2Fmixitup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickkunka%2Fmixitup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickkunka%2Fmixitup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickkunka%2Fmixitup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrickkunka","download_url":"https://codeload.github.com/patrickkunka/mixitup/tar.gz/refs/heads/v3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244893394,"owners_count":20527584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","dom-manipulation","filter","sort","vanilla-js"],"created_at":"2024-07-31T05:01:18.610Z","updated_at":"2025-10-22T18:27:10.559Z","avatar_url":"https://github.com/patrickkunka.png","language":"JavaScript","readme":"# 📣 November 2024 Update 📣\n\n### Changes to License Model\n\nAs MixItUp turns 10 years old (and having remained unchanged since ~2018) it will be moving to a **fully open source** and publicly available model. This means that from 1st November 2024, you no longer need to purchase a license for commercial use.\n\nAdditionally, the MixItUp project and its extensions will become **fully archived** meaning that no future changes will be made. MixItUp has been stable for many years and remains in use across tens of thousands of web sites and applications worldwide. If you wish to use it on a brand-new project and it meets your needs, then you should feel confident in doing so provided you do not require support.\n\n### Pagination and MultiFilter Extensions\n\nThe Pagination and MultiFilter extensions, which were previously closed source and only available via purchase, have also been been made publicly available on GitHub, and may now be used without purchase or a commercial license.\n\n- [www.github.com/patrickkunka/mixitup-pagination](https://www.github.com/patrickkunka/mixitup-pagination)\n- [www.github.com/patrickkunka/mixitup-multifilter](https://www.github.com/patrickkunka/mixitup-multifilter)\n\n### Documentation Website\n\nThe documentation website has been retired in favor of GitHub. All documentation and tutorials are available via this GitHub repository, or the repository of the relevant extension (see above).\n\n### Demos\n\nHosted interactive demos may be found at [patrickkunka.github.io/mixitup/demos](https://patrickkunka.github.io/mixitup/demos). The documented source code of each demo can be found in the [/demos](./demos/) directory if this repository.\n\nDemos for the Pagination and MultiFilter extensions can be found linked to in their respective repositories.\n\n---\n\n# MixItUp 3\n\n[![Latest Release](https://img.shields.io/npm/v/mixitup.svg?style=flat-square)](https://www.npmjs.com/package/mixitup)\n[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/gh/patrickkunka/mixitup/badge?style=rounded)](https://www.jsdelivr.com/package/gh/patrickkunka/mixitup)\n\nMixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove DOM elements with beautiful animations.\n\nMixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts and compatible with inline-flow, percentages, media queries, flexbox and more.\n\nMigrating from MixItUp 2? Check out the [MixItUp 3 Migration Guide](./docs/mixitup-3-migration-guide.md).\n\n#### Licensing\n\nMixItUp is open source and free to use for all use cases, under the Apache 2.0 license.\n\n#### Documentation\n\n- [Factory Function](./docs/mixitup.md)\n- [Configuration Object](./docs/mixitup.Config.md)\n- [Mixer API Methods](./docs/mixitup.Mixer.md)\n- [State Object](./docs/mixitup.State.md)\n- [Mixer Events](./docs/mixitup.Events.md)\n\n#### Tutorials\n\n##### [Integrating MixItUp into Your Project](./tutorials/integrating-mixitup-into-your-project.md)\n\nMixItUp can be used with static sites, CMSs, web apps and more. This tutorial will help you choose the right integration for your project.\n\n##### [Filtering with MixItUp](./tutorials/filtering-with-mixitup.md)\n\nA summary of the various filtering techniques available in MixItUp – filter/toggle controls, multidimensional filtering, and the filter API.\n\n##### [Sorting with MixItUp](./tutorials/sorting-with-mixitup.md)\n\nA summary of the various sorting techniques available in MixItUp – default sort, attribute sort, multi-attribute sort, and the sort API.\n\n##### [MixItUp Grid Layouts](./tutorials/mixitup-grid-layouts.md)\n\nA summary of the three most common approaches to responsive grids – inline-block, flex-box, and floats – in the context of MixItUp.\n\n##### [Marking Up MixItUp Containers](./tutorials/marking-up-mixitup-containers.md)\n\nThis tutorial explores various container markup structures, and explains what is and isn't possible with MixItUp.\n\n##### [Filtering and Sorting on Load](./tutorials/filtering-and-sorting-on-load.md)\n\nA look at how we can use the configuration object to load MixItUp in a state other than its default filtering and sorting behavior.\n\n##### [Using the Dataset API](./tutorials/using-the-dataset-api.md)\n\nNew to MixItUp 3, the Dataset API allows interaction with MixItUp purely via changes to a data model, avoiding the use of DOM selectors.\n\n#### Browser Support\n\nMixItUp 3 has been tested for compatibility with the following browsers.\n\n- Chrome 16+\n- Firefox 16+\n- Safari 6.2+\n- Yandex 14+\n- Edge 13+\n- IE 10+ (with animations), IE 8-9 (no animations)\n\n## Getting Started\n\n#### Contents\n\n- [Building the Container](#building-the-container)\n- [Building Controls](#building-controls)\n- [Styling the Container](#styling-the-container)\n- [Loading MixItUp](#loading-mixitup)\n- [Creating a Mixer](#creating-a-mixer)\n- [Configuration](#configuration)\n\nMost commonly, MixItUp is applied to a **\"container\"** of **\"target\"** elements, which could be a portfolio of projects, a list of blog posts, a selection of products, or any kind of UI where filtering and/or sorting would be advantageous.\n\nTo get started, follow these simple steps:\n\n### Building the Container\n\nBy default, MixItUp will query the container for targets matching the selector `'.mix'`.\n\n```html\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"mix category-a\" data-order=\"1\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"mix category-b\" data-order=\"2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"mix category-b category-c\" data-order=\"3\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"mix category-a category-d\" data-order=\"4\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nTargets can be filtered using any valid selector e.g. `'.category-a'`, and are sorted via optional custom data attributes e.g. `'data-order'`.\n\nFurther reading: [Marking-up MixItUp Containers](./tutorials/marking-up-mixitup-containers.md)\n\n### Building Controls\n\nOne way that filtering and sorting happens is when controls are clicked. You may use any clickable element as a control, but `\u003cbutton type=\"button\"\u003e` is recommended for accessibility.\n\n#### Filter Controls\n\nFilter controls are queried based on the presence of a `data-filter` attribute, whose value must be `'all'`, `'none'`, or a valid selector string e.g. `'.category-a'`.\n\n```html\n\u003cbutton type=\"button\" data-filter=\"all\"\u003eAll\u003c/button\u003e\n\u003cbutton type=\"button\" data-filter=\".category-a\"\u003eCategory A\u003c/button\u003e\n\u003cbutton type=\"button\" data-filter=\".category-b\"\u003eCategory B\u003c/button\u003e\n\u003cbutton type=\"button\" data-filter=\".category-c\"\u003eCategory C\u003c/button\u003e\n```\n\nFurther reading: [Filtering with MixItUp](./tutorials/filtering-with-mixitup.md)\n\n#### Sort Controls\n\nSort controls are queried based on the presence of a `data-sort` attribute, whose value takes the form of a \"sort string\" made up of the name of the attribute to sort by, followed by an optional colon-separated sorting order e.g. `'order'`, `'order:asc'`, `'order:desc'`.\n\n```html\n\u003cbutton type=\"button\" data-sort=\"order:asc\"\u003eAscending\u003c/button\u003e\n\u003cbutton type=\"button\" data-sort=\"order:descending\"\u003eDescending\u003c/button\u003e\n\u003cbutton type=\"button\" data-sort=\"random\"\u003eRandom\u003c/button\u003e\n```\n\nThe values `'default'` and `'random'` are also valid, with `'default'` referring to the original order of target elements in the DOM at the time of mixer instantiation.\n\nFurther reading: [Sorting with MixItUp](./tutorials/sorting-with-mixitup.md)\n\n### Styling the Container\n\nWhile MixItUp can be added on top of any existing CSS layout, we strongly recommend inline-block or flexbox-based styling over floats and legacy grid frameworks when dealing with grid-based designs for a number of reasons.\n\nFurther reading: [MixItUp Grid Layouts](./tutorials/mixitup-grid-layouts.md)\n\n### Loading MixItUp\n\nFirstly, load the MixItUp JavaScript library using the preferred method for your project.\n\n#### Script Tag\n\nThe most simple way to load MixItUp in your project is to include it via a `\u003cscript\u003e` tag before the closing `\u003c/body\u003e` tag on your page.\n\n```html\n        ...\n\n        \u003cscript src=\"/path/to/mixitup.min.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nWith this technique, the MixItUp factory function will be made available via the global variable `mixitup`.\n\n#### Module Import\n\nIf you are building a modular JavaScript project with Webpack, Browserify, or RequireJS, MixItUp can be installed using your package manager of choice (e.g. npm, jspm, yarn) and then imported into any of your project's modules.\n\n`npm install mixitup --save`\n\n```js\n// ES2015\n\nimport mixitup from 'mixitup';\n```\n\n```js\n// CommonJS\n\nvar mixitup = require('mixitup');\n```\n\n```js\n// AMD\n\nrequire(['mixitup'], function(mixitup) {\n\n});\n```\n\n### Creating a Mixer\n\nWith the `mixitup()` factory function available, you may now instantiate a \"mixer\" on your container to enable MixItUp functionality.\n\nCall the factory function passing a selector string or a reference to your container element as the first parameter, and a the newly instantiated mixer will be returned.\n\n###### Example: Instantiating a mixer with a selector string\n\n```js\nvar mixer = mixitup('.container');\n```\n\n###### Example: Instantiating a mixer with an element reference\n\n```js\nvar mixer = mixitup(containerEl);\n```\n\nYour mixer is now ready for you to interact with, either via its controls (see above), or its API (see [Mixer API Methods](./docs/mixitup.Mixer.md)). Click a control or call an API method to check that everything is working correctly.\n\n### Configuration\n\nIf you wish to customize the functionality of your mixer, an optional \"configuration object\" can be passed as the second parameter to the `mixitup` function. If no configuration object is passed, the default settings will be used.\n\nFurther reading: [Configuration Object](/docs/mixitup.Config.md)\n\n###### Example: Passing a configuration object\n\n```js\nvar mixer = mixitup(containerEl, {\n    selectors: {\n        target: '.blog-item'\n    },\n    animation: {\n        duration: 300\n    }\n});\n```\n\n#### Using the API\n\nIf you wish to interact with your mixer via its API, the mixer reference returned by the factory function can be used to call API methods.\n\n###### Example: Calling an API method\n\n```js\nvar mixer = mixitup(containerEl);\n\nmixer.filter('.category-a');\n```\n\nFurther reading: [Mixer API Methods](./docs/mixitup.Mixer.md)\n\n#### Building a modern JavaScript application?\n\nYou may wish to use MixItUp 3's new \"dataset\" API. Dataset is designed for use in API-driven JavaScript applications, and can be used instead of DOM-based methods such as `.filter()`, `.sort()`, `.insert()`, etc. When used, insertion, removal, sorting and pagination can be achieved purely via changes to your data model, without the uglyness of having to interact with or query the DOM directly.\n\nFurther reading: [Using the Dataset API](./tutorials/using-the-dataset-api.md)\n","funding_links":[],"categories":["JavaScript","Misc","Misc [🔝](#readme)","38. 实用工具/其他插件 ##","大杂烩","41. 实用工具/其他插件"],"sub_categories":["Other","13.20 视差滚动(Parallax Scrolling) ###","其它","24.3 Web Sockets"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickkunka%2Fmixitup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickkunka%2Fmixitup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickkunka%2Fmixitup/lists"}