반응형
MixItUp은 아래와 같은 포트폴리오의 프로젝트들 혹은 블로그의 포스트 목록, 제품들을 필터링 또는 정렬을 손쉽게 할 수 있도록 도와주는 라이브러리 입니다.
이 글에서는 필터링 기능만 설명하며 정렬등의 기능은 공식 페이지의 Get started 에서 확인 가능합니다.
#1 파일 다운받기
(1) MixItUp 홈페이지로 이동한 후, 하단에 위치한 Download lastest 를 클릭하여 파일을 다운 받습니다.
(2) 압축을 풀어 dist 폴더에 있는 mixitup.min.js파일을 자식의 프로젝트 폴더로 이동합니다.
#2 HTML 파일 설정
(1) 필터 기능을 컨트롤할 버튼 세팅
<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".category-a">Category A</button>
<button type="button" data-filter=".category-b">Category B</button>
<button type="button" data-filter=".category-c">Category C</button>해당 버튼들에게 data-filter=항목을 이용하여 필터 이름을 지정해 줍니다.
기본적으로 active가 되는 all을 지정해주고 나머지에는 클래스명처럼 앞에 마침표(.)를 찍어 작성해 줍니다.
(2) 필터 기능이 적용될 컨테이너 세팅
<div class="container">
<div class="mix category-a" data-order="1"></div>
<div class="mix category-b" data-order="2"></div>
<div class="mix category-b category-c" data-order="3"></div>
<div class="mix category-a category-d" data-order="4"></div>
</div>컨텐이너의 해당 컨텐츠나 카드에 mix 클래스와 함께 필터링될 클래스를 함께 적어줍니다.
#3 JavaScript 적용하기
(1) 처음 단계에서 다운받아 압축을 푼 파일인 mixitup.min.js를 닫는 body 태그 위쪽에 스크립트 태그를 이용해 연결해 줍니다.
...
<script src="./mixitup.min.js"></script>
</body>
</html>
(2) 다음과 같은 양식으로 자바스크립트를 작성해주면 끝입니다.
let mixer = mixitup('컨테이너_클래스명', {
selectors: {
target: '대상_아이템_클래스'
},
animation: {
duration: 300
}
});컨테이너 클래스명 예 ) '.portfolio_container'
대상 아이템 클래스명 예 ) '.work_card'
클래스명 앞에 . 찍어야 됩니다
샘플 코드
<!DOCTYPE html>
<html>
<head>
<title>MixItUp Example</title>
<!-- MixItUp CDN -->
<script src="https://cdn.jsdelivr.net/npm/mixitup@3"></script>
<style>
/* 스타일을 위한 간단한 CSS */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 200px;
height: 200px;
margin: 10px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container">
<!-- 필터링할 요소들 -->
<div class="item category1">Item 1</div>
<div class="item category2">Item 2</div>
<div class="item category1">Item 3</div>
<div class="item category3">Item 4</div>
</div>
<!-- 필터 버튼 -->
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter=".category1">Category 1</button>
<button class="filter" data-filter=".category2">Category 2</button>
<button class="filter" data-filter=".category3">Category 3</button>
<script>
// MixItUp 초기화
var containerEl = document.querySelector('.container');
var mixer = mixitup(containerEl, {
selectors: {
target: '.item'
},
animation: {
duration: 500, // 애니메이션의 지속 시간 (밀리초 단위)
easing: 'ease-in-out' // 애니메이션의 이징 설정
}
});
// 필터 버튼 이벤트 처리
var filterButtons = document.querySelectorAll('.filter');
for (var i = 0; i < filterButtons.length; i++) {
filterButtons[i].addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
mixer.filter(filterValue);
});
}
</script>
</body>
</html>
반응형