jquery image combobox 이미지 콤보박스 image select box

jquery image combobox 이미지 콤보박스 image select box

 

 

 

위와 같이 이미지가 포함된 콤보박스를 구현해 보도록 하겠습니다.

사용하는 라이브러리는 ms-Dropdown 입니다.

 

아래 Link에서 다운받으실 수 있습니다.

Link : https://github.com/marghoobsuleman/ms-Dropdown

 

구현 방법은 간단합니다.

사용할 페이지에 다운받은 파일 중 jquery.dd.min.js 파일과 css파일을 추가합니다.

 

<link rel="stylesheet" href="${ctx }/resource/css/dd.css" />
<script type="text/javascript"  src="${ctx}/resource/js/jquery.dd.min.js"></script>

 

필수! 해당 라이브러리는 jQuery가 필요합니다.

 

일반 셀렉트 박스와 비슷하지만,

data-image 경로에 있는 이미지가 셀렉트 박스 내에 표출됩니다.

 

<select id="msComboTest">
     <option value="" data-image="${ctx}/resource/images/lcs_null.gif" data-title="NULL"</option>
     <option value="0" data-image="${ctx}/resource/images/lcs_blank.gif" data-title="BLANK">BLANK</option>
     <option value="1" data-image="${ctx}/resource/images/lcs_o.gif" data-title="GREEN↓">GREEN↓</option>
</select>

 

요기만 추가해 주면 끝!

 

$(function(){
     $('#msComboTest').msDropDown();
});

 

이제 실행을 하면 아래와 같이 셀렉트 박스가 표출 되는 것을 확인 하실 수 있습니다.

 

 

물론 동적으로 생성하는 것도 가능하며,

동적으로 해당 셀렉트 박스의 값을 바꾸기 위해서는 아래와 같이 사용합니다.

 

$('#msComboTest').msDropDown().data("dd").set("selectedIndex", 0);

 

인덱스로 해당 값을 초기화 하실 수 있습니다.