jQuery 플러그인 MixItUp은 애니메이션 필터링 및 sorting_jquery를 구현합니다.

믹스잇업(MixItUp)이란 무엇인가요?

MixItUp은 애니메이션 필터링 및 정렬을 제공하는 jQuery 플러그인입니다.
MixItUp은 포트폴리오, 갤러리, 블로그와 같이 분류되거나 정렬된 콘텐츠를 관리하는 데 적합할 뿐만 아니라 애플리케이션 사용자 인터페이스 및 데이터 시각화 작업을 위한 강력한 도구로도 사용됩니다.
MixItUp은 기존 HTML 및 CSS와 잘 작동하므로 반응형 레이아웃에 탁월한 선택입니다.
MixItUp은 레이아웃을 제어하기 위해 절대 위치 지정을 사용하는 대신 기존 온라인 흐름 레이아웃과 작동하도록 설계되었습니다. 백분율, 미디어 쿼리, 인라인 블록 또는 곡선 상자를 사용하고 싶으십니까? 괜찮아요!

페이지 코드

<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

jQuery 컨테이너를 사용한 MixItUp 예:

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

컨테이너 ID를 사용하여 jQuery 메서드 .mixItUp()으로 MixItUp을 인스턴스화할 수 있습니다.

데모 보기 지금 다운로드

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.