들어가기
jQuery 기반의 multiselect 컨트롤러 컴포넌트이다. jQuery 플러그인 형태로 구현되었다. 최대한 기존 select의 기능과 인터페이스를 그대로 지원했고, 좀더 확장된 기능을 추가했다. select을 단순하게 사용했다면 별다른 변경없이 그대로 적용할 수 있다. 작업한 플러그인은 jQuery 플러인 제작을 위한 연습용으로 만들어서 기능적으로 부족한 부분이 많다.
작성자: ospace114@empal.com, http://ospace.tistory.com/
Multiselect 플러그인 소개
기존에 select 태그를 사용한 폼 컴포넌트는 많이 사용되는 기능 중에 하나이다. 그러나 기능이 너무 단순하고 여러 요소를 선택하거나 값을 선택하는 명령이나 선택된 값을 추출하는 처리가 쉽지 않았다. 기존 select 태그 중에 다중 선택 기능에 대해 확장된 다중 선택 select 컴포넌트 라이브러리인 msj(multiselect_j) 라이브러리를 만들었다.
주요 기능은 다음과 같다.
- 기본 select을 사용하는 경우 별다른 변경없이 바로 적용
- 체크 박스로 쉽게 선택 및 상태를 확인 가능
- 검색 기능으로 선택 옵션을 쉽게 찾을 수 있음
UI
일반적인 콤보 박스 형태를 보여준다. 그리고 기본 선택된 값이 표시된다. 현재는 선택된 값이 없기 때문에 “Not Selected”가 표시된다. 멀티셀렉트 박스는 가로화면 꽉차게 표시된다.
선택할 옵션을 보기위해 멀티셀렉트 박스를 클릭한다.
옵션들이 멀티셀렉트 박스 밑에 표시된다. 옵션 최상단에 검색 입력 받으가 있고, 옵션들은 체크 박스와 같이 표시된다.
옵션 이름 또는 체크 박스를 선택하면 멀티세렉트 박스에 선택된 옵션이 표시된다. 만약 여러 개가 선택된 경우 콤마로 구분해서 표시된다.
“Serarch Keyworld”가 표시된 검색 입력 박스을 선택해서 원하는 키워드를 입력하고 엔트키를 누르면 옵션 이름 기준으로 검색해서 표시해준다.
적용 방법
먼저 multiselect_j.js와 multiselect_j.css 파일이 필요하다. 아래 github에서 multiselect_j-x.x.x.css와 아래 github에서 multiselect_j-x.x.x.js 파일을 다운로드 받아서 적당한 위치에 저장한다. 해당 파일을 HTML에 추가한다.
<html>
<head>
<link href="multiselect_j-0.1.0.css" rel="stylesheet"/>
<script src="multiselect_j-0.1.0.js"></script>
</head>
<body>
</body>
</html>버전 명은 다운로드 받은 파일과 동일하게 일치시킨다. 다음은 사용할 select 태그와 선택에 대한 예이다.
<select id="foo" multiple>
<option value="MON">월요일</option>
<option value="TUE">화요일</option>
<option value="WED">수요일</option>
<option value="THU">목요일</option>
<option value="FRI">금요일</option>
<option value="SAT">토요일</option>
<option value="SUN">일요일</option>
</select>select 컨트롤을 multiselect_j로 적용해보자.
let obj = $("#foo").multiselect_j();그러면 아래 처럼 보인다.
값 엑세스
값 조회
jQuery이기 때문에 쉽게 값을 가져올 수 있다.
let values = obj.val();물론 valilascript으로도 값을 가져올 수 있다.
let values = Array.prototype.map.call(foo.selectedOptions, it=>it.value);값 변경
값 변경은 jQuery에서는 val()에 인자로 넘겨주면 된다. 단순히 넘겨주면 값이 변경이 안되고 trigger()을 호출해줘야 한다.
obj.val(['MON', 'TUE']).trigger('change');이벤트
jQuery에서 change 이벤트를 지원한다.
obj.on('change', function() {
console.log('value:', this.value);
});addEventListener()은 지원하지 않는다.
옵션
지원하는 옵션은 height와 width이다. width은 멀티셀랙트 가로 폭을 의미하고 height은 하단 옵션이 표시되는 박스의 높이를 의미한다.
let obj = $("#foo").multiselect_j({width: 100px, height: 200px});Github
https://github.com/ospace/javascript-works/tree/main/multiselect_j
마무리
jQuery 플러그인 제작 연습용으로 만든 플러그인이라서 완성도 측면에서는 한참 모자란다. 최근에는 jQuery을 많이 사용하고 있지 않아서 더 확장할지는 모르겠다. 다음에 다룰려고 하는 multiselect_j 플러그인 구현 방법을 보기위한 사전 참고용으로만 보세요. 물론 마음대로 사용하셔도 됩니다.
부족한 글이지만 참고가 되었으면 하네요. 모두 즐거운 코딩생활되세요. ^^ ospace.
참고
[1] HTML select Tag,
https://www.w3schools.com/tags/tag_select.asp
[2] nobleclem, jQuery MultiSelect, https://github.com/nobleclem/jQuery-MultiSelect
'3.구현 > HTML5&Javascript' 카테고리의 다른 글
| [HTML] crossorigin 속성 (0) | 2024.03.06 |
|---|---|
| [jquery] multiselect 플러그인 제작하기 (0) | 2024.02.29 |
| [javascript] JSONP 란? (0) | 2024.02.27 |
| [jquery] jQuery 플러그인 제작을 위한 기초 (2) | 2024.02.26 |
| [vue2] Vuetiful Datatable 사용하기 (0) | 2024.01.26 |
