예제를 통해 Chosen 및 Select2 설명

두 개의 jQuery 플러그인을 사용하여 선택 상자의 스타일을 지정할 수 있습니다. 즉, Select2와 Chosen입니다. Select2 및 Chosen 플러그인은 모두 선택한 상자의 모양을 개선하고 상자의 동작을 향상시켜 사용자 친화적으로 만듭니다. 또한 두 플러그인 모두 단일 선택 상자뿐만 아니라 여러 선택 상자에서도 작동합니다.

선택

사용자 친화적인 선택 상자를 생성하기 위한 JavaScript 플러그인. Chosen은 프로토타입과 JQuery 버전 모두에서 사용할 수 있습니다.

선택된 기능

사용자 친화적

사용자는 수많은 가능성을 헤쳐나갈 필요 없이 원하는 이름으로 간단히 시작할 수 있습니다. 대안을 선택하려면 "Enter"를 누르거나 마우스를 클릭하기만 하면 됩니다. 일치하지 않는 항목은 화면에서 제거됩니다.

점진적 향상

Chosen이 기본 HTML 선택 필드를 대체하므로 JavaScript를 지원하지 않는 브라우저에서 작동하도록 하기 위해 더 이상 추가 단계를 수행할 필요가 없습니다. 또한 백엔드는 이벤트를 사용하여 데이터를 관리하지 않습니다.

간편한 설정

선택한 파일을 애플리케이션에 포함시키고 플러그인을 열기만 하면 됩니다. 선택 그룹, 선택한 상태, 다중 기능 및 브라우저 탭 순서는 선택 항목에 따라 자동으로 준수됩니다.

2개를 선택하세요

Select2는 검색, 원격 데이터 세트, 마커, 무한 스크롤 및 기타 여러 유용한 속성에 사용할 수 있는 사용자 정의 가능한 선택 상자를 사용자에게 제공합니다.

Select2의 기능은

검색, 태그 지정, 원격 데이터 세트, 무한 스크롤 및 기타 여러 옵션을 지원할 뿐만 아니라 사용자 정의 가능한 선택 상자도 제공합니다.

RTL 환경

RTL 환경을 지원하며 40개 이상의 언어로 검색 기능이 내장되어 있습니다.

아약스

Ajax를 사용하면 긴 항목 목록을 빠르게 검색할 수 있습니다.

Sass 및 선택적 Bootstrap 3 테마를 사용하여 완전히 스킨 가능한 CSS를 만듭니다.

선택한 Javascript 라이브러리

JQuery에서 선택한 플러그인을 사용하려면 아래와 같이 일부 라이브러리를 추가해야 합니다. -

• chosen.jquery.min.js

• .min.css

  를 선택하세요.

또한 선택한 상자에서 플러그인을 활성화하려면 다음 코드를 추가해야 합니다. -

으아악

위에 작성된 코드는 JQuery의 스크립트입니다.

Select2 자바스크립트 라이브러리

jQuery에서 select2 플러그인을 사용하려면 아래와 같이 라이브러리를 추가해야 합니다. -

• select2.min.js

• select2.min.css

또한 선택한 상자에서 플러그인을 활성화하려면 다음 코드를 추가해야 합니다. -

으아악

위에 작성된 코드는 JQuery의 스크립트입니다.

selected와 select2의 기본 사항을 이해했습니다. 이제 요점으로 넘어가겠습니다. 즉, 요점에서 둘 사이의 차이점을 살펴보겠습니다.

Chosen과 Select2의 차이점

선택 상자 향상을 위해 가장 일반적으로 사용되는 두 가지 라이브러리는 Choose와 select2입니다. Chosen은 Select2보다 오래되었으며 jQuery 및 Prototype을 지원합니다. 둘 다 업데이트 중입니다. Select2는 Chosen에서 영감을 얻었으며 jQuery만 지원합니다.

selected와 select2의 차이점을 살펴보겠습니다 -

데이터 로드

selected를 사용하여 데이터를 로드할 때 전체 데이터세트를 DOM에 옵션 태그로 로드해야 하므로 작은 데이터세트를 처리하는 데 제한이 있습니다. 반면에 Select2는 함수 개념을 사용하여 결과를 동적으로 찾기 때문에 select2 메서드가 결과를 부분적으로 로드할 수 있으므로 selected의 단점이 제거됩니다.

페이지 매기기 요구 사항

이전 지점에서 설명한 것처럼 전체 데이터 세트가 선택기에 의해 한 번에 로드됩니다. 즉, 데이터를 여러 부분으로 나눌 필요가 없으므로 페이징 개념은 쓸모가 없습니다. 반면에 Select2 기능은 전체 데이터 세트를 처리하고 필요한 결과를 부분적으로 로드하며 페이징 개념을 지원합니다. 사용자가 현재 데이터의 맨 아래로 스크롤하면 검색 기능을 호출하여 더 많은 데이터를 로드하여 제공합니다.

태그 지원 유형

옵션 태그가 제공하는 유일한 마크업 지원은 선택 항목에서 지원되는 렌더링된 텍스트입니다. 반면 Select2는 결과를 표시하기 위해 다양한 마크업을 만드는 데 사용할 수 있는 확장 지점을 제공합니다.

결과 추가

결과를 추가하기 위해 Choosen과 select2에는 정적 또는 동적이라는 두 가지 옵션이 있지만 Choose는 결과를 동적으로 추가할 수 없는 반면 select2는 정반대의 작업을 수행하며 태그를 사용하여 결과를 동적으로 추가할 수 있습니다.

개발

Select 개발에는 Sass와 CoffeeScript가 사용되었고, Select2 개발에는 순수 JavaScript와 CSS가 사용되었습니다.

위에 제공된 차이점은 Select와 Select의 주요 차이점이며, Select의 크기는 27KB이고 Select 2의 크기는 57KB로 더 큰 것과 같은 약간의 사소한 차이점도 있습니다.

NOTE - Saas와 CoffeeScript는 디버깅 선택을 더 어렵게 만드는 것으로 밝혀졌습니다.

Select2는 모바일 장치를 공개적으로 지원하는 반면 Chosen은 일부 장치에서 의도적으로 비활성화됩니다. 따라서 모바일 기기에서 '확장된 선택박스'를 사용하고 싶다면 Select2를 사용하는 것이 좋습니다.

결론

이 기사에서는 선택 상자의 스타일을 지정하는 데 사용할 수 있는 두 가지 JQuery 플러그인, 즉 Select2와 Chosen이 있다는 것을 배웠습니다. Select2 및 Chosen 플러그인은 모두 선택한 상자의 모양을 개선하고 상자의 동작을 향상시켜 사용자 친화적으로 만듭니다. Select2와 choose에는 데이터 로딩 프로세스, 페이징 필요 여부, 결과를 동적으로 추가할 수 있는지 여부, 개발 방법 등 많은 차이점이 있습니다.

위 내용은 예제를 통해 Chosen 및 Select2 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!