JQuery Select Box 구성 요소 - 선택한 대 Select2-JS 튜토리얼-php.cn

JQuery Select Box 구성 요소 - 선택한 대 Select2 이 기사는 Martín Martínez와 Chris Perry가 검토 한 동료입니다. Sitepoint 콘텐츠를 최대한 활용 한 Sitepoint의 동료 검토 자 덕분에! 프로젝트에서 일한 적이 있습니까? 시각적으로 무언가가 벗어난 것처럼 보였습니까? 아마도 프로젝트가 거의 끝났지 만 일부 요소는 그렇게 좋아 보이지 않았습니까? 이것들은 작은 세부 사항 일지 모르지만 차이를 만듭니다.

프로젝트에 매력적이지 않은 선택 상자가 포함되어 있고 더 많은 기능을 추가하려는 경우 선택한 것으로 선택되어 있으며 Select2는 매우 유용합니다. 이들은 선택된 상자를 스타일링하여 모양을 향상시키고 동작을 사용자 정의하고보다 사용자 친화적으로 만드는 두 개의 jQuery 플러그인입니다. 이 기사에서는이 두 플러그인을 머리를 대고하고 기능과 사용 사례를 비교하여 귀하에게 가장 적합한 정보를 선택할 수 있도록합니다. . 키 테이크 아웃 선택한 선택 및 select2에는 다른 일반적인 기능이 있지만 흥미로운 결과를 발견 한 세 가지 기능, 즉 비활성화 결과, 숨겨진 검색 상자 및 RTL (Right-to-Left) 지원을 살펴보고 싶습니다. 비활성화 된 결과 이 중 가장 흥미로운 것은 비활성화 된 결과입니다. 이 옵션 세트를 사용하여 선택 및 select2 하이라이트 활성화 옵션. 장애가있는 선택을 볼 수 있지만 선택할 수는 없습니다. 비활성화 된 결과는 일반적으로 다른 조건이 충족 될 때까지 사용자가 옵션을 선택하지 못하도록 설정됩니다. 이 기능은 선택 상자를 강력한 도구로 바꾸고 필요에 따라 사용하는 방법을 배우면 사용자와의 참여를 증가시킵니다.

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

로그인 후 복사

플러그인에 비활성화 된 결과를 활성화했음을 알리려면이 기능을 사용할 옵션 태그에 속성을 비활성화 한 = "비활성화"를 추가하십시오.

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

로그인 후 복사

이 선택된 예제에서 사용자는 지리적 위치에서 사용할 수있는 옵션 만 선택할 수 있지만 사용할 수 없더라도 다른 옵션도 볼 수 있습니다. 선택한 펜 vs select2 : codepen에서 sitepoint (@sitepoint)의 비활성화 결과를 참조하십시오. 검색 상자 숨기기 옵션 목록에 단일 선택 상자의 선택이 많지 않은 경우 검색 창을 숨기는 것이 좋습니다. 선택한 경우 검색 창을 숨기려면 disable_search_threshold를 사용하고 선택 상자의 옵션 수보다 더 큰 값으로 설정해야합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chosen/Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
  </head>
  <body>

    <script></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

로그인 후 복사

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

로그인 후 복사

동일한 논리는 select2에 적용되지만 유일한 변경 사항은 DICABLE_SEARCH_THRESHOLD 대신 용어입니다.이를 MinimumResultsForsearch라고합니다.

select2에 대해 추가 해야하는 한 가지는 선택 상자에 옵션 수에 대해 걱정하지 않고 검색 상자를 영구적으로 숨길 수 있다는 것입니다. MinimumResultsForsearch를 인피니티로 설정하여이를 수행 할 수 있습니다
git clone https://github.com/harvesthq/chosen.git git clone https://github.com/select2/select2.git 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
오른쪽에서 왼쪽 (RTL) 지원
많은 웹 사이트가 알파벳이 다른 다른 언어로 작성되며 그 외에도 이러한 언어 중 일부는 다른 방향에서 읽습니다. Select Box는 이러한 언어의 규칙에 따라 조정하고 LTR (왼쪽에서 오른쪽)에서 RTL로 방향을 이동해야합니다. 이는 사용자 경험을 향상시키고 해당 지역의 사용자를위한 웹 사이트의 유용성을 향상시킵니다.
선택 및 select2는 선택된 상자에서 오른쪽에서 왼쪽 기술을 지원합니다. 그들이 가진 유일한 차이점은 select2가 JavaScript 파일에서 RTL 지원을 선언해야한다는 것입니다. 한편 선택한 선택에서 선택한 RTL 클래스를 HTML에서 선택한 클래스와 함께 추가합니다. 왜 선택한 를 선택하십시오 Select2는 선택한 선택에서 영감을 얻었으며 선택된 대부분의 기능이있는 동안 기고자는 거기서 멈추지 않았습니다. 그들은 프로그래밍 방식 액세스, 템플릿, 비활성화 모드, 태깅 및 토큰 화를 포함하여 선택된 상자의 가장 멋진 기능 중 일부를 구축했습니다. 또한 ajax를 지원합니다.
프로그램 액세스 프로그래밍 방식 액세스는 선택 상자를 다른 레벨로 가져갑니다. 그것들은 여러 선택된 상자와 결합하여 매우 유용합니다. JavaScript를 사용하여 규칙에 따라 이러한 선택된 상자에 작동하는 버튼을 추가 할 수 있습니다.
다중 선택 상자의 일부 옵션에 서로 논리가 서로 연결되어 있고 관찰에 따라 이러한 "링크 된"옵션이 많은 사용자로부터 선택할 확률이 큰 경우 이들을 선택하는 것이 유용합니다. 한 번의 클릭으로 선택합니다.

이 예에서는 "iOS 기술"버튼을 클릭하여‘Swift’및‘Objective-C’를 신속하게 설정할 수 있습니다. Codepen에서 SitePoint (@SitePoint)에 의한 Tokenization
Select2의 가장 강력한 기능 중 하나는 템플릿입니다. 템플릿을 사용하면 select2에 표시된 구성 요소의 모양을 사용자 정의 할 수 있습니다. 이 기능은 옵션 태그에서 제공하는 최소 입력을 이미지 또는 기타 구성 요소와 병합하여 사용자를위한 시각적 디스플레이를 만들 수 있습니다.
git clone https://github.com/harvesthq/chosen.git git clone https://github.com/select2/select2.git 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
이 예제는 Select2의 템플릿을 Bootstrap의 글리 피콘과 결합합니다

위 내용은 JQuery Select Box 구성 요소 - 선택한 대 Select2의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!