Multiselect

멀티셀렉트(Multiselect) 컴포넌트는 셀렉트 박스의 다수의 option을 체크박스로 선택할 수 있는 컴포넌트입니다.

<select class="Multiselect">
	<option value="korea">Korea</option>
	<option value="usa">USA</option>
	<option value="japan">Japan</option>
	<option value="china">China</option>
</select>

멀티셀렉트 컴포넌트는 jQuery UI Multiselect Widget를 wrapping한 구조로 되어 있습니다. 그렇기 때문에 기존 컴포넌트와는 별개로 아래 3가지 파일 링크가 필요합니다.

- alopex-ext.min.js
	jquery-ui.js, jquery-ui-multiselect.js, jquery-ui-multiselect-filter.js가 merge된 파일
- alopex-ext-setup.js
	Multiselect에 대한 widget 확장 셋업
- alopex-ext.css
	Multiselect에 대한 스타일링

이 문서는 jQuery UI Multiselect Widget의 일부 기능을 설명하고 있습니다. 기타 기능은 jQuery UI Multiselect Widget에서 확인 바랍니다.

Multiselect - DataBinding 연계

Multiselect Component에 DataBinding 연계하는 샘플입니다.
"options" 키를 이용해 option 엘리먼트를 생성하고, "selectedOptions" 키를 이용하여 선택할 option 엘리먼트를 지정합니다.

<select id="multi" class="Multiselect"
	data-bind="options: selectOptions1, selectedOptions: selected1">
</select>
<button class="Button" id="set">setData</button>
<button class="Button" id="get">getData</button>

$("#set").on('click', function(){
	$('#multi').setData({
		selectOptions1: [{value: 'opt1', text: '첫번째 옵션'}, {value: 'opt2', text: '두번째 옵션'}],
		selected1: 'opt2'
	});
});
$("#get").on('click', function(){
	alert(JSON.stringify($('#multi').getData()));
});

data-position 2.10.8+

• 'top' (default) | 'bottom'
  • 멀티셀렉트의 리스트 영역의 위치를 설정합니다.

<select class="Multiselect" data-position="top">
	<option value="korea">Korea</option>
	<option value="usa">USA</option>
	<option value="japan">Japan</option>
	<option value="china">China</option>
</select>

.close() 2.10.10+

멀티셀렉트의 리스트를 동적으로 닫는 API입니다.

<select id="openCloseMulti" class="Multiselect">
	<option value="korea">Korea</option>
	<option value="usa">USA</option>
	<option value="japan">Japan</option>
	<option value="china">China</option>
</select>
<button class="Button" id="openBtn">open</button>
<button class="Button" id="closeBtn">close</button>

$("#openBtn").on('click', function(){
		$('#openCloseMulti').open();
});
$("#closeBtn").on('click', function(){
		$('#openCloseMulti').close();
});

.multiselect(option)

멀티셀렉트 내 시점 별로 이벤트 핸들러를 등록합니다.

• beforeopen, open, beforeclose, close, checkAll, uncheckAll, click
  • callback {obejct}
    • 시점별 콜백 함수 오브젝트
• position 2.10.8+
  • 'bottom'(default) | 'top'
    • 멀티셀렉트의 리스트 영역의 위치를 설정합니다.

$('#my-select').multiselect({
	beforeopen: function(){
		//멀티셀렉트 표시 직전 이벤트
	},
	open: function(){
		//멀티셀렉트 표시 시 이벤트
	},
	beforeclose: function(){
		//닫기 직전 이벤트
	},
	close: function(){
		//닫기 시 이벤트
	},
	checkAll: function(){
		//전체선택 시 이벤트
	},
	uncheckAll: function(){
		//전체선택해제 시 이벤트
	},
	click: function(){
		//체크박스 선택 시 이벤트
	}
});

.open() 2.10.10+

멀티셀렉트의 리스트를 동적으로 여는 API입니다.

setup 자바스크립트에서 멀티셀렉트의 기본 속성을 공통으로 설정합니다.

$a.setup('multiSelect', {
	multiple : true,
	noneSelectedText : '선택하세요',
	header : true,
	minWidth : 200,
	selectedList : 2,
	checkAllText : '전체선택',
	uncheckAllText : '전체해제',
	selectedText : '#개 선택됨',
	filter : true,
	label : '필터',
	placeholder : '검색어를 입력하세요',
	checkedheader : true,
	menuWidth : 'auto',
	htmlBind: true,
	position: 'top'
});

• autoOpen {boolean}
  • false
    • 초기화 시 자동 open 옵션
• checkAllText {string}
  • "전체선택"
    • 전체 선택의 텍스트
• checkedheader {boolean} 2.3.6.2+
  • true  
    • header에 checkAll 영역 노출여부
• filter {boolean}
  • true
    • 텍스트 박스 필터링 여부
• header {boolean}
  • true
    • 전체선택/헤제, 닫기 아이콘 등 포함한 헤더 표시 여부
• height {int}
  • 175
    • 체크박스 컨테이너의 px 높이
• hide {array}
  • "empty"
    • Close시 효과 지정. ex: ['explode', 500]
• htmlBind {boolean} 2.3.6.18+
  • true
    • default
  • false
    • option의 & 등의 표시가 깨지는 경우에 false를 사용. <b>text</b> 등과 같은 html append는 동작하지 않음.
• label {string}
  • "필터"
    • 필터링 텍스트 앞쪽에 붙는 레이블
• locale {string} 2.10.4+
  • 'ko'(default) | 'en' | 'zh' | 'ja'
    • 한글 설정
• menuWidth {number|'auto'} 2.3.6.2+
  • number
    • 리스트 영역의 width 값 설정
  • 'auto'
    • 'auto'의 경우는 내용에 맞게 width 늘어남
• minWidth {int}
  • 180
    • 위젯의 최소 폭. 'auto' 로 세팅하면 자동 너비
• multiple {boolean}
  • true
    • false일 경우 checkbox 대신 radio로 표시됨
• noneSelectedText {string}
  • "선택하세요"
    • 아무것도 선택되지 않았을 때의 텍스트
• placeholder {string}
  • "검색어를 입력하세요"
    • 필터링 텍스트 박스의 기본 표시 문구
• position {'bottom' | 'top'} 2.10.8+
  • 'bottom'(default) | 'top'
    • 멀티셀렉트의 리스트 영역의 위치를 설정합니다.
• selectedText {string}
  • "#개 선택됨"
    • 선택된 값들의 표시 방법
• selectedList {int}
  • 2
    • 해당 개수까지만 선택된 값에 나열하여 보여주고, 그 이상의 개수는 selectedText로 표현
• show {array}
  • "empty"
    • Open시 효과 지정. ex: ['slide', 500]
• uncheckAllText {string}
  • "전체해제"
    • 선택 해제의 텍스트