[bootstrap] <select>에 MSG를 끼얹나? (bootstrap-select)

URL : http://silviomoreto.github.io/bootstrap-select/

HTML의 드롭다운메뉴 태그인 <select>를 부트스트랩으로 직접 테마를 적용할 수 있긴 하지만, 방법이 제한적이며 사용이 까다롭다는 단점이 있다. (그냥 없는셈 치는게 정신건강에 이롭다.)

이를 말끔히 해결할 수 있는 도구가 바로 bootstrap-select이다. 호출방법은 아래와 같다.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

또는 자바스크립트로도 가능하다.

$('select').selectpicker();

적용 후 웹 사이트를 실행하면 원래의 <select> 태그를 숨기고 <button>,<ul>,<div> 태그조합으로 메뉴를 재생성하기 때문에 직접적인 css 적용은 어렵다. 다만 플러그인에서 디자인 적용을 위한 옵션을 제공하니 해당 옵션을 사용하면 된다. 

예를들어, width를 50%로 적용하고 싶다면 다음과 같이 작성하면 된다.

<select class="selectpicker" data-width="50%">
  ...
</select>

multiple 옵션도 동일하게 사용가능하다.

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

multiple 옵션 예제를 확인해보면 선택이 0개일 때, "Nothing Select" 라는 문구가 나타날 것이다. 영어를 못알아 보는건 아니지만 한글사이트에 어울릴진 의문이다. Example 페이지에 예시된 title 속성으로 한글변환을 적용할 수도 있겠지만, 추가 스크립트를 통해 한글을 제공하므로 후자의 방법을 추천하고 싶다.

메인사이트의 다운로드링크를 통해 플러그인을 받았다면 압축폴더 내 dist/js/i18n 폴더가 보일 것이다. 해당 폴더 내에는 포스트 작성시점으로 36개의 파일이 있는데 그 중 defaults-ko-KR 파일을 적용하면 된다.

적용순서는 다음과 같다.

<script src="~/bootstrap-select.min.js"></script>
<script src="~/defaults-ko-KR.min.js"></script>

폐쇄적인 환경이 아니라면 CDN을 이용하는 것도 나쁘지 않다.