Selectator는 다중 선택 및 검색 필터링 기능을 구현하는 jQuery 드롭다운 목록 상자 플러그인입니다. 검색을 지원하며 데이터 컨테이너로 사용되는 원래 선택 상자에 직접 영향을 줄 수 있습니다. 이 드롭다운 목록 상자 플러그인을 통해 여러 옵션을 그룹화하고, 옵션 아이콘을 설정하고, 옵션을 검색 및 필터링하고, 다중 선택을 수행할 수 있습니다.
사용방법
이 드롭다운 카테고리 상자 플러그인을 사용하려면 fm.selectator.jquery.css, jQuery 및 fm.selectator.jquery.js 파일을 페이지에 도입해야 합니다.
<link rel="stylesheet" href="fm.selectator.jquery.css"/> <script src="jquery-1.11.0.min.js"></script> <script src="fm.selectator.jquery.js"></script>
HTML 구조
아이콘 수준과 그룹화 옵션이 포함된 드롭다운 목록의 HTML 구조는 다음과 같습니다.
<label for="select"> Multi select with custom content: </label> <select id="select" name="select" multiple> <optgroup label="Group one" class="group_one"> <option value="1" class="option_one" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option> <option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option> </optgroup> <optgroup label="Group two" class="group_two"> <option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option> <option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option> <option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" data-right="5">Five</option> <option value="6" class="option_six">Six</option> </optgroup> <optgroup label="Group three" class="group_three"> <option value="7" class="option_seven">Seven</option> </optgroup> <option value="8" class="option_eight" data-subtitle="Otte">Eight</option> <option value="9" class="option_nine">Nine</option> <option value="10" class="option_ten" selected>Ten</option> <option value="11" class="option_eleven" selected>Eleven</option> <option value="12" class="option_twelve">Twelve</option> <option value="13" class="option_thirteen">Thirteen</option> <option value="14" class="option_fourteen">Fourteen</option> </select> <input value="activate selectator" id="activate_selectator4" type="button">
플러그인 초기화
페이지 DOM 요소가 로드된 후 selector() 메서드를 통해 드롭다운 목록 플러그인을 초기화할 수 있습니다.
$('#selectBox').selectator();
태그를 사용하여 직접 초기화할 수도 있습니다.
<select multiple class="selectator" data-selectator-keep-open="true">
구성 매개변수
$('#selectBox').selectator({ prefix: 'selectator_', // CSS class prefix height: 'auto', // auto or element useDimmer: false, // dims the screen when option list is visible u**arch: true, // if false, the search boxes are removed and // `showAllOptionsOnFocus` is forced to true keepOpen: false, // if true, then the dropdown will not close when // selecting options, but stay open until losing focus showAllOptionsOnFocus: false, // shows all options if input box is empty selectFirstOptionOnSearch: true, // selects the topmost option on every search searchCallback: function(value){}, // Callback function when enter is pressed and // no option is active in multi select box labels: { search: 'Search...' // Placeholder text in search box in single select box } });
기타 사용 가능한 속성 태그
data-left, data-right 및 data-subtitle 태그를 사용하여 드롭다운 목록의 표시 정보를 확장할 수 있습니다. 접두사 prefix_title, prefix_left, prefix_right 및 prefix_subtitle을 사용하여 CSS를 통해 스타일을 지정할 수 있습니다. 데이터는 모두 순수 HTML 코드이므로 이미지 코드도 사용할 수 있습니다.
<select id="selectBox"> <!-- Normal option tag --> <option value="1">This is the title</option> <!-- Extended option tag --> <option value="2" data-left="This is the left section" data-right="This is the right section" data-subtitle="This is the section under the title">This is the title</option> </select>
의 코드는 다음과 유사한 구조로 나타납니다.
CSS 수업
수업 | 설명 |
prefix_element | 새로운 드롭다운 목록 상자입니다. 동일한 추가 클래스인 single 및 multiple 이 함께 제공되며, 이는 단일 선택인지 다중 선택인지 설정하는 데 사용됩니다.또한 options-visible 및 options-hidden 옵션 표시 여부를 설정하는 데 사용됩니다 |
prefix_chosen_items | 선택한 옵션을 담는 용기 |
prefix_chosen_item | 현재 선택한 옵션의 컨테이너 |
prefix_chosen_item_title | 현재 선택된 옵션의 제목 |
prefix_chosen_item_left | 현재 선택한 옵션 왼쪽의 콘텐츠 |
prefix_chosen_item_right | 현재 선택한 옵션 오른쪽 내용 |
prefix_chosen_item_subtitle | 현재 선택된 옵션의 자막 |
prefix_chosen_item_remove | 현재 선택한 옵션의 제거 버튼 |
prefix_input | 선택기용 입력 상자입니다. 옵션 표시 또는 옵션 숨김과 함께 사용되어 다중 선택 상자인지 단일 선택 상자인지 다르게 표시하고 스타일을 지정합니다. |
prefix_textlength | 다중 선택 상자의 입력 크기를 계산하는 데 사용됩니다 |
접두사_옵션 | 옵션 목록 컨테이너 |
prefix_group_header | 그룹명 |
prefix_group | 그룹 컨테이너 |
접두사_옵션 | 결과 옵션.클래스 active 를 사용하여 현재 활성화된 옵션을 나타냅니다 |
접두사_옵션_제목 | 결과 옵션 제목 |
prefix_option_left | 결과 옵션 왼쪽의 콘텐츠 |
prefix_option_right | 결과 옵션 오른쪽 내용 |
prefix_option_subtitle | 결과 옵션 오른쪽에 자막 |
prefix_dimmer | 어둡게 |
방법
方法 | 描述 |
refresh | 该方法用于刷新插件 |
destroy | 该方法用于销毁插件 |
jquery.selectator-custom 드롭다운 목록 플러그인의 github 주소는 다음과 같습니다.