몇 달 전, 나는 필터링 및 정렬을위한 인기있는 jQuery 플러그인 인 Mixitup에 관한 기사를 썼습니다. 오늘 기사에서는 jQuery 및 CSS 애니메이션으로 자신만의 간단한 여과 가능한 구성 요소를 구축하는 방법을 보여 드리겠습니다.
.
<span><span><span><div</span> class<span>="cta filter"</span>></span> </span> <span><span><span><a</span> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></span>Show All<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Green Boxes<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Blue Boxes<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Red Boxes<span><span></a</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="boxes"</span>></span> </span> <span><span><span><a</span> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></span>Box1<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></span>Box2<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></span>Box3<span><span></a</span>></span> </span> <span><!-- other anchor/boxes here ... --> </span> <span><span><span></div</span>></span></span>
이 시점에서 한 가지를 명확히하는 것이 중요합니다. 위 코드의 Fadeout () 메소드에 대한 구문에 주목하십시오. 다음과 같이 보입니다
<span><span>.filter a</span> {
</span> <span>position: relative;
</span><span>}
</span>
<span><span>.filter a.active:before</span> {
</span> <span>content: '';
</span> <span>position: absolute;
</span> <span>left: 0;
</span> <span>top: 0;
</span> <span>display: inline-block;
</span> <span>width: 0;
</span> <span>height: 0;
</span> <span>border-style: solid;
</span> <span>border-width: 15px 15px 0 0;
</span> <span>border-color: #333 transparent transparent transparent;
</span><span>}</span>
<span><span><span><div</span> class<span>="cta filter"</span>></span> </span> <span><span><span><a</span> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></span>Show All<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Green Boxes<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Blue Boxes<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Red Boxes<span><span></a</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="boxes"</span>></span> </span> <span><span><span><a</span> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></span>Box1<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></span>Box2<span><span></a</span>></span> </span> <span><span><span><a</span> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></span>Box3<span><span></a</span>></span> </span> <span><!-- other anchor/boxes here ... --> </span> <span><span><span></div</span>></span></span>
그러면 jQuery 코드에서 새 케이스를 스위치 문에 추가하여 새로 처리 할 수 있습니다. 필터 :
스위치 (필터) { 케이스 '그레이스 스케일': $ container.addclass ( 'Filter-Grayscale');
break ;// ...
}사용자가 새 필터를 활성화 할 수있는 버튼이나 다른 UI 요소를 추가해야합니다.
필터 간의 전환을 어떻게 애니메이션 할 수 있습니까?
이 필터링 구성 요소를 여러 요소에서 동일하게 사용할 수 있습니까? Page?
예,이 필터링 구성 요소를 같은 페이지의 여러 요소에서 사용할 수 있습니다. 각 요소에 jQuery로 선택하는 데 사용할 수있는 고유 한 ID 또는 클래스가 있는지 확인하면됩니다. 그런 다음 필터링 구성 요소를 각 요소에 개별적으로 적용 할 수 있습니다.
필터를 응답 할 수 있습니까?
필터를 반응하는 방법은 CSS 및 JQuery 코드를 뷰포트. CSS 미디어 쿼리를 사용하여 다양한 뷰포트 크기에 다른 스타일을 적용 할 수 있습니다. jQuery 코드에서는 $ (Window) .resize () 메서드를 사용하여 창이 크기가 크기로 표시 될 때 코드를 실행할 수 있습니다. 그런 다음 창의 새 크기에 따라 필터를 조정할 수 있습니다.
jQuery없이 CSS 애니메이션을 사용할 수 있습니까?
예, jQuery없이 CSS 애니메이션을 사용할 수 있습니다. CSS 애니메이션은 CSS의 기능이며 JavaScript가 필요하지 않습니다. 그러나 JQuery는 특히 복잡한 애니메이션이 있거나 사용자 작업에 응답하여 요소를 애니메이션하려는 경우 애니메이션을보다 쉽게 관리하고 제어 할 수 있습니다.
사용자 정의 필터를 추가 할 수 있습니까?
최적화 방법을 최적화 할 수 있습니다. 필터링 구성 요소의 성능?
예,이 필터링을 사용할 수 있습니다. 백엔드 데이터베이스가있는 구성 요소. 데이터베이스에서 데이터를 검색하려면 서버에 AJAX 요청을 작성한 다음 jQuery를 사용하여 필터링 구성 요소를 데이터에 적용해야합니다. 이를 통해 데이터베이스에 저장된 기준에 따라 데이터를 필터링 할 수 있습니다.
위 내용은 CSS 애니메이션 및 jQuery로 필터링 구성 요소 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
